ie6下的另一个3px
经典的ie6下的3px就是一个浮动层与非浮动层相邻时之间加一个3px，这个网上很多。这里写一个这周布局时遇到的另一个ie6的3px的bug。
这里首先说一下ie6的一个经典bug，没有内容的div的高度如果设为少于20px，那么该div的最小高度就是20px，换句话就是说如果该div的高度height设为小于20px,那么无论怎样设置高度height，ie6下都为20px。设了background仍算是没有内容。如何解决，网上有很多方法，最常用的就是在div中加一个 然后_line-height:6px; 因为这时line-height决定了层的高度。下面的代码就是这样了
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 html,body{margin:0; padding:0;}
8 #a1{width:100px;_line-height:3px;background:red;}
9 #a2{width:100px; height:200px; background-color:blue;}
10 </style>
11 </head>
12
13 <body>
14 <div id="a1"></div>
15 <div id="a2">baidu</div>
16 </body>
17 </html>
由于a1的div的height小于20px，所以height属性对高度不起作用，只能设置line-height。又因为只设置background仍是没有内容，所以不管怎样设置line-height都没有用仍然是20px。上图的红色部分就是a1。
但是a1中加一个 就可以了。如下。
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 html,body{margin:0; padding:0;}
8 #a1{width:100px;_line-height:6px;background:red;}
9 #a2{width:100px; height:200px; background-color:blue;}
10 </style>
11 </head>
12
13 <body>
14 <div id="a1"> </div>
15 <div id="a2">baidu</div>
16 </body>
17 </html>
加了 就可以用line-height控制层高了。但是另一个问题有出现了。a1的下方多出若干空隙，用尺子量，刚好3px，这就是本文的所讲的3px的bug。修改代码如下，
View Code
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>无标题文档</title>
6 <style type="text/css">
7 html,body{margin:0; padding:0;}
8 #a1{width:100px;_line-height:6px;background:red; _margin-bottom:-3px;}
9 #a2{width:100px; height:200px; background-color:blue;}
10 </style>
11 </head>
12
13 <body>
14 <div id="a1"> </div>
15 <div id="a2">baidu</div>
16 </body>
17 </html>
如果_margin-bottom:-2px，仍然会有空隙,而-3px就没有，所以原来的空隙肯定是3px。其实只要层高小于20px，就会在下方出现3px空隙，这时只好用上面的方法解决了。
出现层高小于20px的情况多数是圆角切图，水平分割线等情况。
