IE下的bug解决方案

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>

4、如何分别单独定义IE6 7 8 的样式

_width: 900px;      /* IE6专用 */ 

*+width： 900ox;  /* IE7专用 */ 

*width: 900px;      /* IE7 6 都起作用 */ 

width: 900px\9;     /* IE6 7 8 9 10 */

width: 900px\0;     /* IE8 9 10 */

width: 900px\9\0;    /* IE9 10 */