一、双外边距浮动bug
.left{ float:left; margin-left:20px; } //wrong
此left在ie6下的左外边距变成40px;此时的代码应改成:
.left{float:left; display:inline; margin-left:20px;} //ok
二、3像素文本便宜bug
当文本与一个浮动元素相邻时,这个bug就会表现出来。
例如,假设将一个元素向左浮动,并且不希望相邻段落中的文本围绕浮动元素。
.myFloat{ float:left; width:200px;} p{margin-left:200px;}
三、li下面一行的空白
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>li</title> <style type="text/css"> * {padding:0;margin:0;} li { } li a {background:#CCC;border-bottom:1px #000 solid; display:block;} li a:hover {background:#BBB;} </style> </head> <body> <ul> <li><a href="#">11111</a></li> //如果写成一行,如<li></li><li></li><li><li></li>即可 <li><a href="#">22222</a></li> <li><a href="#">33333</a></li> </ul> </body> </html>
有三种办法:1:li{display:inline;} 2:li a{ zoom:1;} 3:li a{ 100%;}
四:png在ie6下不透明的问题以及使用滤镜后a标签无法点击的解决办法
五:ie6文字溢出
参考:http://www.cnblogs.com/liko/archive/2011/04/28/2031860.html
http://www.web92.net/513.html
http://www.wufangbo.com/ie6-ie7-ie8-css-bug-2/ 比较全