CSS IE6的兼容问题

一 IE6 ,7不支持小于12px的盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 700px;
            height: 4px;
            background-color: red;
            /* 在IE67里面height不能用 用以下的方式兼容  必须小于height*/
            font-size: 4px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

浏览器中的 hack问题

https://www.cnblogs.com/mumble/p/4576489.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            /* 带下划线的只能在IE6中有用,在IE6以上没有用 */
            _background-color: blue;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

所以第一个例子就可以修改成这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        div {
            width: 700px;
            height: 4px;
            background-color: red;
            /* 在IE67里面height不能用 用以下的方式兼容  必须小于height 加上 _ 只有IE6才能识别*/
            _font-size: 4px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

解决微型盒子的正确写法 比如隔墙法 和 内墙法

height: 4px;
_font-size: 4px;

IE6不支持用 overflow:hidden清除浮动

解决方法 添加_zoom:1; zoom放大的意思

实际上zoom:1能够触发IE6的hasLayout机制,这个机制只有IE6有,这里是初学博客,暂不深究,可自行百度

需要强调的是overflow:hidden 溢出盒子的内容隐藏是IE6兼容的,但是用于清除浮动在IE6下不兼容

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }
        li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: gold;
            list-style: none;
            text-align: center;
        }
    
        .box1 {
            overflow: hidden;
            /* IE6 中不支持overflow:hidden清除浮动,所以添加以下代码解决 */
            _zoom:1;
            margin-bottom: 10px;
        }
       
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JS</li>
            <li>HTML5</li>
            <li>OC</li>
        </ul>
    </div>
    
    <div class="box2">
        <ul>
            <li>swift</li>
            <li>java</li>
            <li>PHP</li>
        </ul>
    </div>
    
</body>
</html>

IE6的双倍margin bug

当出现连续浮动元素 携带和浮动方向相同的margin时 那么在IE6中队首的元素会双倍margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            height: 100px;
            border: 1px solid red;
            /* 解决向左浮动 有边margin40px的队首元素没有距离的问题 */
            padding-left: 40px;
        }

        div ul li {
            list-style: none;
            background-color: blue;
            height: 50px;
            width: 70px;
            /* 当出现连续浮动元素 携带和浮动方向相同的margin时 那么在IE6中队首的元素会双倍margin */
            float: left;
            /* margin-left: 40px; */
            /* 解决方法 浮动方向和margin的方向不一样 且在父元素增加浮动方向的padding 这个应当是习惯 或者给队首元素加一个class单独设置一半margin 不推荐*/
            margin-right: 40px;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

IE6的三像素(3pxbug)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 400px;
            height: 400px;
            background-color:orange;
        }

        p {
            /* 如果是margin-top 如果div不加边框 会使div距离上边20像素 */
        /* 出现条件 浮动 父子之间使用margin */
            /* 在高级浏览器中 是20px 但是在IE6中会多三像素 23px 
            解决办法 不用管 因为不允许在父子之间使用margin 所以不会出现,如果你出现了 代码不标准 */
            margin-left: 20px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <p></p>
    </div>
</body>
</html>
原文地址:https://www.cnblogs.com/huanying2000/p/11509532.html