IE下的bug解決方案

標籤：style   blog   color   io   os   ar   div   sp   log   

1、IE6下的雙邊距bug

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>雙邊距bug</title>    <style>        * { margin: 0; padding: 0; }        .box{            width: 500px;            height: 300px;            background: red;            float: left;    /* 在塊級標籤中添加浮動float之後，又添加margin，會導致IE6下的雙邊距bug */            margin-left: 50px;              /* 解決方案: 為IE6添加樣式，將區塊層級元素變為行內元素 */            _display: inline;         }    </style></head><body>    <div class="box"></div></body></html>

 

2、IE6下的1px偏差

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>IE6的1px偏差</title>    <style>        /* position:absolute;解決方案：為IE6下的定位元素的父級寬高都設定為偶數，就可以避免 */        .box1 { width: 400px; height: 400px; border: 1px solid black; position: relative; }        .box2 { width: 50px; height: 50px; position: absolute; right: -1px; bottom: -1px; background: yellow; }    </style></head><body>    <div class="box1">        <div class="box2"></div>    </div></body></html>

 

3、IE6下overflo： hidden；不起作用。

解決方案：這時候給父級也添加position:relative;

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>在IE6-overflow-hidden</title>    <style>        .box1 { width: 500px; height: 300px; background: red; overflow: hidden; position: relative; }        .box2 { width: 300px; height: 500px; background: yellow; position: relative; }    </style></head><body>    <div class="box1">        <div class="box2"></div>    </div></body></html>

 

IE下的bug解決方案