当前位置: 开发笔记 > 前端 > 正文

IE6下margin时，float浮动产生双倍边距

作者：一飞冲天的快乐_549 | 来源：互联网 | 2023-08-01 13:10

今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法对元素float-left

　　今天遇到了一个IE6下的兼容性问题，虽然IE6已经不被大众所期待了，用户也已基本上消失的所剩无几，但是，作为一个问题而存在，我们有必要尝试的去研究一下bug的改善方法

对元素float-left，然后再对元素设置margin-left:40px，调试时候，鬼一般的出现了双倍的margin-left,变为80px（同样如果是float-right,margin-right亦是如此）

效果如下：

　　而在chrome，IE7+，均没有这个现象产生，现象如下：

　　后来，在样式中给元素添加了一个display:inline之后，就没有这个现象产生了，由于inline是使元素变成行内元素，那么什么是行内元素呢，其实就是内联元素，只是叫法不同，描述的都是一种状态，那么何为内联元素呢？就是说允许其他与之均为内联的元素都能够在同一行显示，如常见的,,当然，我们对其设置宽度和高度是不起作用的，除非我们再给他加入block；

　　我们的标签我们这么理解，然后当元素变为行内元素之后，会新开辟一个地方，而那个地方之前是没有元素的或者没有内联元素排在它的前面，那么这样，行内元素自然就会自动的浮动到我们父级元素的边框上，则双倍margin的现象就会消失，取而代之的是单倍margin正常显示，就这么理解。

代码如下：

.main{
　　margin-left: 40px;
　　background-color: #a847c3;
　　width: 80px;
　　height: 80px;
　　padding: 20px 20px;
　　border: 1px solid #2C2C2C;
　　float: left;
　　display: inline;
}
.content{
　　background-color: #2143fd;
　　margin: 100px auto;
　　width: 1000px;
　　height: 120px;
}

.clearFix:after {
　　clear: both;
　　content: ".";
　　display: block;
　　height: 0;
　　visibility: hidden
}

　　当然还有一个方法，就是我们将div改成标签，这样的好处就在于，标签本身就是具有内联属性的内联元素，那么问题又来了，内联元素对于宽度和高度是没有效果的，但是我们加了float之后元素就会呈现出来了，要是不加就不会出现，为什么呢（由于默认本身为内联，故没有加display:inline）？现象如下:

　　加了float之后的现象：

　　后来我上了百度搜索了一下，键入“加了float”，百度奇迹般的自动弹出

　　看来这是一个大众耳熟能详的问题啊，笔者不禁为自己知识的浅陋而感慨

　　然后得出的结果如下：

　　由于对元素float之后，会使得元素自动变为block，因为几个元素之间的浮动，是需要紧挨着元素的边框，如果不是block，就不能实现浮动。然后内联元素会根据样式中设定的宽度和高度来调整自身的大小，如果样式中没有设定宽度和高度，那么就会自适应为其元素默认的宽度和高度。

　　样式如下：

　　.main{
　　　　margin-left: 40px;
　　　　background-color: #a847c3;
　　　　width: 80px;
　　　　height: 80px;
　　　　padding: 20px 20px;
　　　　border: 1px solid #2C2C2C;
　　　　/*display: block;*/
　　　　float: left;
　　　　/*display: inline;*/
　　}