修复IE的浮动元素双倍边距Bug

CSS开发人员可能经常会碰到的一个现象是，一个页面在IE（特别是老版本的IE）中显示正常，而在现代浏览器中却完全变形了，或者情况完全相反。

常常能听到有人抱怨：“在IE上开发时间中，超过 60% 的时间，都是在与IE的Bug作斗争。”导致这一现象的根本原因，是不知道IE都有哪些 bug，也不知道如何解决这些 bug。在出现问题时，往往束手无措，更不要说预防 Bug 了。

因此，作为一位优秀的CSS开发人员，必须了解IE浏览器的常见 Bug，以及导致这些 Bug的各种因素，以便能够预防 Bug 的产生，或在出现问题后，能够及时发现并快速修复。

浮动元素双倍边距Bug

浮动元素双倍边距 Bug，是IE6及更低版本中的一个经典Bug。当给元素设置了 float 属性，同时设置了与浮动方向相同margin值，则浮动元素的 margin就会加倍。

简单的说，就是左浮动元素的 margin-left 被加倍，而 margin-right 不会被加倍，右浮动元素的 margin-right 被加倍，margin-left 不会被加倍。

但是，当有多个元素都在一行内向相同方向浮动，且都有同方向的 margin 时，只有靠近浮动方向的第一个元素的 margin 会加倍，其他元素则不会。

假设在一个容器中，有两个元素：

<div id="wrapper">
<div class="fl">float</div>
<div class="fl">float</div>
</div>

现在，让两个元素都向左浮动，并为它们设置 100px 的左外边距：

.fl {
float: left;
width: 100px;
height: 60px;
margin-left: 100px;
}

在IE6中及更低版本中，会发现第一个元素的左外边距，由 100px 被扩大为 200px。而第二个元素的左外边距仍然是 100px，没有被加倍。如图 10‑2 所示：

图10-2 浮动元素双边距Bug

修复这个 Bug 的方法很简单，只需将浮动元素的 display 属性设置为 inline，便可轻松解决问题。但是，这里的 display 属性，除了修复IE Bug外，并没有其它用处。

.fl {
float: left;
width: 100px;
height: 60px;
margin-left: 100px;
display: inline;
}

修复后的运行效果如图 10‑3 所示：

图10-3 修复浮动元素双边距Bug

将浮动元素的 display 属性设置为 inline 并不会影响它的显示方式，还能阻止IE6及更低版本将它的外边距加倍。因此，每当让具有水平外边距的元素进行浮动时，都应该很自然地将它的 display 属性设置为 inline，以防止外边距被加倍。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

修复IE的浮动元素双倍边距Bug相关推荐

[css] 如何解决IE6浮动时产生双倍边距的BUG？
[css] 如何解决IE6浮动时产生双倍边距的BUG? 1.当块级元素有浮动样式的时候,给元素添加margin-left和margin-right样式,在ie6下就会出现双倍边距2.给当前元素添加样式 ...
【问题】父套子时，‘阻止子元素的外边距传递给父元素’与闭合浮动
使用空的<table>标签可以隔离父子元素的外边距,阻止外边距的重叠(直接添加会产生无用标签,要在CSS中添加属性) 1 <!DOCTYPE html> 2 <html ...
CSS中浮动和定位对元素宽度/外边距/其他元素所占空间的影响
一.width:auto和width:100%的区别 1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) ...
IE6中float元素双倍margin问题
在IE6中,当给某元素设置float时,同时给该元素设置margin时,他会有双倍外边距的问题 p {float:right;margin-right:10px; /*页面真正显示的是margin-r ...
CSS浮动元素特点有什么
什么是浮动? 元素的浮动是指设置了浮动属性(flot)的元素. CSS浮动有什么作用? 1.让多个盒子水平排列成一行,浮动成为布局的重要手段; 2.可以实现盒子的左右对齐等等; 3.浮动最早是用来控制 ...
CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
css --- 浮动元素与块框/行内框重叠时的细节
块框,可以认为是块级元素(如div.h1)的内容区 + 内边距行内框可以认为是行内元素(如span)的内容区 + 内边距当块级框/行内框和一个浮动元素重叠时,行内框的边框.背景和内容都在幅度元 ...
六、pink老师学习笔记——CSS三角形之美 margin负值之美文字围绕浮动元素行内块元素布局的巧妙运用
7. 拓展@ 7.1 margin负值之美 1). 负边距+定位:水平垂直居中咱们前面讲过, 一个绝对定位的盒子, 利用父级盒子的 50%, 然后往左(上) 走自己宽度的一半 ,可以实现盒子水 ...
浮动和清浮动，内外边距和margin的坑
浮动:使元素脱离文档流,按照一定的方式排列,遇到相邻的浮动元素或者父级的边界停下来. 可以往left,也可以往right 一般建议用ul.f>li.s编写,(<ul></ul& ...

修复IE的浮动元素双倍边距Bug

浮动元素双倍边距Bug

修复IE的浮动元素双倍边距Bug相关推荐

最新文章

热门文章