float后,IE下margin双倍间距的问题

DATE: 2016-11-10 / VIEWS: 543

一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!

Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。

现在如何来做?
研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:
9.5.1 Positioning the float: the 'float' property这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被直接应用,而没有任何繁琐的隐藏方法。

最后看例子:
下面是照常显示IE Bug的例子
HTML代码
http://www.w3.org/1999/xhtml">


The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)




顶部
左边
右边
底部


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

下面是对浮动元素使用了"inline"修复
HTML代码
http://www.w3.org/1999/xhtml">


The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)




顶部
左边
右边
底部


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]