margin的IE6兼容问题

标签:#IE6兼容# 时间:2018/10/12 20:35:05 作者:Shino

一 IE6双倍 margin bug
在ie6里,当出现连续浮动的元素,携带和浮动方向相同的margin时。队首元素会出现双倍margin。
 解决方法:
 ① 使浮动方向和margin的方向相反。
 ②单独给队首元素写一个一般的hack(不使用)

二 IE6的3px bug
在ie6里面,在盒子里面浮动标签使用margin来定位,则会出现3px的空白误差。
    <style type="text/css" media="screen">
     *{
         margin: 0;
         padding: 0;
     }
     div{
         width:300px;
         height:300px;
         background-color: orange;
     }
     div p{
        float: right;
         margin-right:20px;
         width: 100px;
         height: 100px;
         background-color: blue;
     }
</style>
</head>
<body>
    <div>
        <p></p>
    </div>
不过这种情况一般不会出现,因为根本不允许浮动标签通过边距定位。如果出现了3px bug,说明代码不标准。
欢迎大家关注DataLearner官方微信,接受最新的AI技术推送
相关博客