ie6浏览器常见的兼容问题,margin 3px 和双倍间距问题
做了一下测试,这两个bug都是由于设置了浮动导致的。
其中一个div设置了浮动,另一个没有设置为浮动 导致而成,同一行内都设置浮动也可以解决。
有问题的代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ie6下面的margin 3px像素问题</title> <style> body{margin:0;} .left{width:200px;height:200px;background:#99ff99;float:left;/*margin-right:10px;*/} .left2{width:200px;height:200px;background:pink;/*float:left;*/} </style> </head> <body> <div class="left">left</div> <div class="left2">left2</div> </body> </html>正常显示的代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>ie6下面的margin 3px像素问题</title> <style> body{margin:0;} .left{width:200px;height:200px;background:#99ff99;float:left;/*margin-right:10px;*/} .left2{width:200px;height:200px;background:pink;float:left;} </style> </head> <body> <div class="left">left</div> <div class="left2">left2</div> </body> </html>
对于双倍间距,也是这个问题
第二个元素 也浮动 显示的图片是:
3像素的问题就解决了 但是双倍bug还没有解决
解决方法:
.left{width:200px;height:200px;background:#99ff99;float:left;margin:10px 10px 10px 10px;display: inline;}
于是就 O 啦
