前端开发必知：浏览器兼容(一)——IE双边距_ie 浏览器支持的margin-left-优快云博客

本文链接：https://blog.youkuaiyun.com/mmcrsx_blog/article/details/79867600

本文探讨了前端开发中浏览器兼容性问题，重点是IE6的双边距bug。当块状元素左侧浮动并设置左外边距时，IE6会显示两倍边距。解决方案包括统一浏览器标签的默认padding和margin，以及为浮动元素添加display：inline。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、不同浏览器的标签默认的padding，margin不同

解决：css里 *{margin:0;padding:0;}
备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外边距是0

二、IE6 双边距 bug

块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示margin 比设置的大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body,div{
            margin:0;
            padding:0;
        }
        #div1{
            width:200px;
            height:200px;
            background:#900;
            margin:20px 0 0 20px;
            float:left;
        }
        #div2{
            width:300px;
            height:200px;
            background:#009;
            margin:20px 0 0 20px;
            float:left;
        }
    </style>
</head>
<body>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>