What are the skills of using fixed height of DIV container in IE6,IE7

This article mainly introduces the IE6,IE7 in the DIV container fixed height of the use of skills, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

There are many differences between IE6 and IE7 in their interpretation of CSS, one of which is height today.

Example:

The code is as follows:

Under IE6: if the height of the content in the DIV does not exceed 50px, the height of the DIV is 50px. If the height exceeds the set value, the height will expand with the content, that is, the adaptive height.

Under IE7: if the height of the content in DIV does not exceed 50pxDIV, it is 50px. If it exceeds the set value, the height of DIV will still be fixed at 50px, and the excess content will overflow beyond DIV. If there are other contents under DIV, it will overlap with the overflowed content.

This is obviously a very noteworthy place, if not handled will cause page confusion. There are usually two ways to solve this problem:

First, height is primary: let the height of DIV be fixed to 50px, and the extra content should be hidden. The CSS of the two browsers can be written together as:

The code is as follows:

Overflow:hidden this is very important, compatibility depends on him.

Second, content-oriented: let the minimum height of DIV be 50px, and when there is too much content, DIV is highly adaptive to the amount of content. At this point, you need to use CSS HACK to do some compatibility processing:

, minimum height of min-height:50px, this IE7 and FF are recognizable, _ height:50px is underlined for IE6 recognition only.

Thank you for reading this article carefully. I hope the article "what are the skills for using DIV containers at a fixed height in IE6,IE7" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!