想要创建出漂亮的网页设计，除了要认真学习每一个html和CSS代码之外，不可能不去了解一下臭名昭著的IE6和更早的那些IE浏览器的坏脾气，因为你本来写出的规规矩矩的代码，漂亮的设计就此就要完成了，却发现呈现出的效果压根不是你所期望的那样，漂亮的布局被破坏的体无完肤。更可气的是当你查找一遍代码中的错误时，却压根找不出来。这时候你就迫切需要了解一下IE6和它的那些同伙的坏脾气了，因为很可能它们就是罪魁祸首。到底IE6的那几个家伙们到底是如何搞乱你的设计的？咱们双该如何解决呢，别急，请听我慢慢道来：
|
CSS代码如下：
| 以下为引用的内容： .floatbox { float: left; width: 150px; height: 150px; margin: 5px 0 5px 100px; display: inline; } |
例子：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body{margin:0;} 8 .wrap{float:left;border:2px solid #000;} 9 .box{width:100px;height:100px;background:red;margin:0 100px;float:left; } 10 /* 11 IE6下的双边距BUG 12 在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍 13 14 解决办法: display:inline; 15 */ 16 </style> 17 </head> 18 <body> 19 <div class="wrap"> 20 <div class="box"></div> 21 </div> 22 </body> 23 </html>
一：IE6、 7下IE67下li的4px间隙
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .list{ width:300px;margin:0;padding:0;} 8 .list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;} 9 .list a{float:left;} 10 .list span{float:right;} 11 /* 12 IE6，7下li的间隙 13 14 在IE6，7下li本身没浮动,但是li内容有浮动的时候，li下边就会产生几px的间隙 15 16 解决办法: 1.给li加浮动 17 2.给li加vertical-align:top; 18 */ 19 </style> 20 </head> 21 <body> 22 <ul class="list"> 23 <li> 24 <a href="#">文字文字文字文字文字</a> 25 <span>作者</span> 26 </li> 27 <li> 28 <a href="#">文字文字文字文字文字</a> 29 <span>作者</span> 30 </li> 31 <li> 32 <a href="#">文字文字文字文字文字</a> 33 <span>作者</span> 34 </li> 35 <li> 36 <a href="#">文字文字文字文字文字</a> 37 <span>作者</span> 38 </li> 39 </ul> 40 </body> 41 </html>
三：IE6、 7下最小高度
使用font-size:0;或overflow：hidden；
原文：http://www.cnblogs.com/nifengs/p/4870416.html