ie6中的著名的双倍边距清除方法

最新推荐文章于 2021-06-24 11:49:45 发布

原创最新推荐文章于 2021-06-24 11:49:45 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ie #xhtml #float #html #xml #div

css技术专栏收录该内容

83 篇文章

订阅专栏

本文详细解释了在网页布局中遇到float与margin属性冲突时的问题根源，并提供了有效的解决方案，通过使用display:inline属性避免了IE6浏览器中双倍边距现象，确保网页布局的正确呈现。

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

避免出现该问题的方法：
避免给一个页面元素同时设置float:left和margin-left属性。

解决方法：display:inline;

图解：

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
body,div{
margin:0;
padding:0;
}
#one{
width:100px;
height:100px;
background:red;
float:left;
margin-left:100px;
/*display:inline; 如果不加这行代码在ie6中会有双倍边距，定义的是左外边距是100像素，但在ie6中会显示200像素，所以不加这行代码时要避免给一个页面元素同时设置float:left和margin-left属性。*/
}
#two{
width:200px;
height:200px;
background:blue;
float:left;
margin-left:300px;
}
</style>
</head>
<body>
<div id="one">盒子1</div>
<div id="two">盒子2</div>

</body>
</html>