ie下的3像素和双倍bug问题

    xiaoxiao2023-03-25  5

    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 啦

    转载请注明原文地址: https://ju.6miu.com/read-1203660.html
    最新回复(0)