首页 > 代码库 > 重构中的BUG集锦

重构中的BUG集锦

2024-07-02 02:57:26   215人阅读

一、

bug出现在：IE7/8

bug demo：

<div class="wrapper">
   <div class="wrapper2 clearfix" id="wrapper2">
       <div class="fl box1" id="box1">box1</div>
       <div class="fl box2" id="box2">box2</div>
   </div>
</div>
.clearfix:after {content: ""; display: block; clear:both;}

    .clearfix {zoom: 1;}

    .fl {float: left;}

    .wrapper {width: 502px; background-color: yellow; margin: 20px auto;
    }

    .wrapper2 {
        border: 1px solid black;
        /*width: 500px*/
    }

    .box1 {width: 200px; background-color: red; height: 200px;}

    .box2 {width: 300px; background-color: green; height: 200px;}

代码中wrapper2有没有设置宽度，则IE7/8中表现是比较怪的：

解决办法：给wrapper2设置宽度即可，目前仍不清楚为什么明明box1+box2的宽度正好等于wrapper2内容框的宽度，它们却换行了

 

2.　bug浏览器：IE7/8/9，元素设置宽高在浏览器中失真

　　demo：

　　

<div class="wrapper">
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
     <div class="box"></div>
</div>
.wrapper {
        width: 300px;
        padding: 20px 0;
        border: 1px solid black;
        margin: 20px auto;
    }

    .box {
        width: 5px;
        height: 5px;
        background-color: black;
        margin: 20px auto;
    }

效果如下：

会发现：四个box虽然都设置的宽高都为5px，但显示效果却出现不一致的情况。

另外，如果box宽高值很大，设置一个宽高都为5px的背景图片，背景图片依然会出现上面的效果，像是某个背景被截取了一样。

 

 

 

 


联系
我们