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

小灰灰 2022-07-16 02:07 138阅读 0赞

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>

对于双倍间距，也是这个问题

![Center][]

第二个元素 也浮动 显示的图片是：

![Center 1][]

3像素的问题就解决了   但是双倍bug还没有解决

解决方法：

.left{
      width:200px;height:200px;background:#99ff99;float:left;margin:10px 10px 10px 10px;display: inline;}

![Center 2][]

于是就  O 啦

[Center]: /images/20220716/2390d7f33d3c453788a03c4ba2045f92.png
[Center 1]: /images/20220716/090056b938ee45c386796ec88020554b.png
[Center 2]: /images/20220716/a26eb8bfeb364e9d805dfce0152e93a1.png