Css设置float后,IE浏览器下margin双倍间距的问题
作者:admin 日期:2012-06-30
来源：Duing-冬忆个人博客
今天发现在用div+Css做网页时，使用margin:1px 0 0 32px，间距(左右间距双倍，上下间距正常)会翻倍！！
如上设置左间距为32px(像素)在IE浏览器下，显示结果是64px(像素)。
解决问题如下：
原因是CSS中设置了居左浮动float:left的元素，只要在此当中加上display: inline,就解决了！
一段无错的代码把一个居左浮动(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停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。
原文链接地址：http://www.duing.cn/article/Study/Css_float_margin.html
今天发现在用div+Css做网页时，使用margin:1px 0 0 32px，间距(左右间距双倍，上下间距正常)会翻倍！！
如上设置左间距为32px(像素)在IE浏览器下，显示结果是64px(像素)。
解决问题如下：
原因是CSS中设置了居左浮动float:left的元素，只要在此当中加上display: inline,就解决了！
一段无错的代码把一个居左浮动(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停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。
原文链接地址：http://www.duing.cn/article/Study/Css_float_margin.html
[本日志由 admin 于 2012-07-02 06:44 PM 编辑]
上一篇: 童话_温州方言歌曲_温州话歌曲
下一篇: 女人街_温州方言歌曲_温州话歌曲
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: IE CSS float margin 
相关日志:
评论: 0 | 引用: 0 | 查看次数: -
发表评论
