Shulou(Shulou.com)06/02 Report--

How to deeply analyze the different performance in IE6 when DIV is empty in CSS layout, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Different representations in IE6 when DIV is empty in CSS layout

In practical applications, an empty DIV is used for special needs, and a smaller height value is defined. The common idea is as follows:

HTML

CSS div {height:5px;}

The above code can be displayed correctly in most browsers, but in practice, it is not as simple as in theory, the special IE6 is not as you think, it seems that sometimes you can define height, and sometimes it doesn't work for some reason!

[Ctrl+An all Select Tip: you can modify part of the code first, and then press run]

◆ analysis: I summed up some knowledge points from the code

1. When an empty DIV only gives height, its height is controllable under IE6. Some elements such as background-color,border... Will not affect the value of the height.

two。 If there is a height in the style, then IE will have a height by default, and other values such as zoom:1 will also generate this "layout". You can try to test other styles yourself.

3. If an empty DIV is given a "layout", its height is related to the text size, and the actual height value shown by the specific text size is visible from the test page.

4. You can see that the minimum height of text that can be displayed by IE is 2PX.

5. In actual problem solving, we will teach students in accordance with their aptitude according to its characteristics and add font-size: numerical value to the style; if height:12px;, then your font-size should be less than or equal to 10px, that is, the * * value can be taken to 10px; if it is large, it will be supported by the text (the content is a BUG of the following version of IE6), so the easiest way is to set the text size to 0

Therefore, we all use the method of setting font size to solve the problem, and some people even add a line height, which has been tested to have no effect on the height. So it is not necessary to add line height.

The second way to solve the problem is to join the overflow:hidden; idea is to hide the excess part, which is also a good way!

Having said so much, we just use the means of testing to analyze and summarize its rules, as a technical research, so that the impression is deeper, in fact, there are only two methods, you just need to remember these two methods.

◆ * * methods:

Div {font-size:0;/* writes about units as follows: if the value is 0, you don't have to write units, and non-zero values should write units; (you can also write it as 0px.) * /}

The second method of ◆

Div {overflow:hidden;} after reading the above, have you learned how to delve deeply into the different representations of IE6 when DIV is empty in CSS layout? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.