Use an empty div for special needs in practical applications and define a smaller height value. The usual idea is to see the following code:
Html
<div></div>
Css
div{
height:5px;
}
The above code in most browsers can be correctly displayed, but we in practice, it is not as simple as the theory, the special IE6 is not as you think, as if sometimes the height can be defined, sometimes it does not know why the cause of failure!
First give me the test code, and then in detail:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title> Untitled document </title><style type=" Text/css ">h3{margin:10px 0;padding:0;} Body{background:white; color:black; font-size:12px; Content{width:400px;border:solid 1px red; p{color:black;background:green;margin:0;padding:0}. T{height:6px;width:600px;background:red}. b{width:200px background: #000; height:5px; B0{background: #000; font-size:0px;}. b1{width:200px background: #000; font-size:1px; b2{width:200px background: #000; font-size:2px; b3{width:200px background: #000; font-size:3px; b4{width:200px background: #000; font-size:4px; b5{width:200px background: #000; font-size:5px; b6{width:200px background: #000; font-size:6px; b7{width:200px background: #000; font-size:7px; b8{width:200px background: #000; fonT-SIZE:8PX}. b9{width:200px background: #000; font-size:9px; b10{width:200px background: #000; font-size:10px; b11{width:200px background: #000; font-size:11px; b12{width:200px background: #000; font-size:12px;} </style></pead><body><p> empty div in the IE6 browser in different representations </p><p> one. The performance of an empty div without style </p><div class= "Content" > <p>something</p> <div></div> <p> Something</p></div><p> two. The performance of empty div after adding width </p><div class= "content" > <p>something</p> <div class= "B" ></div> <p>something</p></div><p> two. Empty div Add width + font after the performance </p><p>0. empty divfont-size:0px; actual height=2px;</p><div class= "content" > < p>something</p> <div class= "B0" ></div> <p>something</p></div><p>1. Empty divfont-size:1px; actual height=2px;</p><div class= "content" > <p>something</p> <div class= " B1 "></div> <p>somethiNg</p></div><p>2 divfont-size:2px, actual height=2px;</p><div class= "content" > <p >something</p> <div class= "B2" ></div> <p>something</p></div><p>3. Empty divfont-size:3px; actual height=4px;</p><div class= "content" > <p>something</p> <div class= " B3 "></div> <p>something</p></div><p>4. Empty divfont-size:4px; actual Height=5px;</p ><div class= "Content" > <p>something</p> <div class= "B4" ></div> <p>something </p></div><p>5. empty divfont-size:5px;; Actual Height=5px;</p><div class= "content" > <p>something</p> <div class= "B5" ></div > <p>something</p></div><p>6. Empty divfont-size:6px; actual Height=6px;</p><div class = "Content" > <p>something</p> <div class= "B6" ></div> <p>something</p></ Div><p>7. empty divfont-size:7px; actual HEIGHT=8PX;</h3><div class= "Content" > <p>something</p> <div class= "B7" ></div> <p> Something</p></div><p>8. empty divfont-size:8px; actual height=10px;</p><div class= "content" > <p>something</p> <div class= "B8" ></div> <p>something</p></div>< H3>9 divfont-size:9px; actual height=12px;</p><div class= "content" > <p>something</p> < Div class= "B9" ></div> <p>something</p></div><p>10. Empty divfont-size:10px; Actual Height=12px;</p><div class= "content" > <p>something</p> <div class= "B10" ></div > <p>something</p></div><p>11 empty divfont-size:11px; actual Height=14px;</p><div class= "Content" > <p>something</p> <div class= "B11" ></div> <p>something</p> </div><p>12. empty divfont-size:12px;; Actual Height=15px;</p><div class= "content" > <p>something</p> <div class= "B12" ></div> <p>something</p></div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
Analysis: From the code I summed up some knowledge points
1. When an empty div gives only a height, its height is controllable under IE6. Some elements, such as Background-color,border ... Will not affect the height of the value;
2. If there is height in the style, IE will default to have a height, other values such as zoom:1 will also produce this "layout" can try to test other styles;
3. Empty div If given a "layout", then its height is related to the size of the text, the specific size of the actual height of the displayed value from the test page visible;
4. It can be seen that IE can display the minimum height of the text is 2PX;
5. In the practical solution to the problem, we according to its characteristics, in accordance with their aptitude, in the style of adding font-size: value, if height:12px, then your font-size to be less than 10px, that is, the maximum is preferable to 10px; In the big words will be text distraction (open content is IE6 the following version of a bug), so the most convenient way is to set the text size of 0;
In order to use the font size to solve the problem, some people also want to join a row height, the test row height has no effect. So it's not necessary to add row heights.
The second way to solve the problem is to join the Overflow:hidden; the idea is to go beyond the hidden part, which is also a good way!
Said so much, we just use the means of testing to analyze the summary of its laws, as a technical research, so that the impression is also in-depth, in fact, two methods, you just remember these two methods can be.
The first method:
div{
font-size:0;/* about the unit is: if it is 0 value can not write units, not 0 value to write units; (You can also write 0px.) ）*/
}
The second method
div{
Overflow:hidden;
}
Purecss language: Let us grow up here together! I wish everyone who read this article to learn progress!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
