IE双倍浮动边界Bug
原址:
http://www.positioniseverything.net/explorer/doubled-margin.html
译文:PorkFat
什么发生故障?
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box),并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单,对吗?但直至它被在IE/Win中浏览为止,在浏览器中居左浮动元素的边界长度被神秘地翻了一倍!
情况应该如何?
下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界,使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止,一直都还不错。
IE双倍浮动边界问题 - 扬子 - 扬子
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示,下面的图释展示了IE/Win在布局上所做的。
IE双倍浮动边界问题 - 扬子 - 扬子
这为什么会发生?别问这种傻问题!这就是IE,记得吗?符合标准只是理想的状况,不指望实现,这个简单的事实正验证了。
重点
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间,在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样,双倍边界同样神秘地显示在居右的相同方式。
最后,修复办法!
直到现在(04年1月)这个Bug一直被认为是无法修复的,通常用来替代错误的边界的控制方法如:一个不可视浮动元素的左边距,连同一个内嵌的盒子一起,可视的盒子装在不可视浮动元素里;或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了,但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。
Steve Clason发现了一个修复办法,描述在他的Guest Demo里,修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法,使用一个属性来修复影响不相关属性的Bug。
现在如何来做?
研究它,简单地将{display: inline;}设置给浮动元素就是全部所需做的!是的,听起来太简单了,不是吗?不过这是真的,仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素,而不管他们之前是什么。就如Steve从W3C里指出:
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
这说明浮动元素上的{display: inline;}会被忽略,事实上所有的浏览器没有呈现任何改变,包括IE。但是,它不知何故让IE停止将浮动元素的边界翻倍。因而,这个修复办法可以被直接应用,而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙,只要把这个修复装入IE独用的Tan Hack里,细节如同IE Three Pixel Text-Jog Demo。
下面是两个使用了前面相同代码的生动演示,第一个照常显示了IE的Bug,下一个对浮动元素使用了"inline"修复。
IE双倍浮动边界问题 - 扬子 - 扬子
IE双倍浮动边界问题 - 扬子 - 扬子
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
篇外话
你可能注意到这个Bug修复的想法在Steve的演示页底部复制,你看到,在一开始 Steve注意到IE的文本缩进Bug并找到了"inline"来修复它。他引起了我(Big John)的注意,因为这是一个冷门的Bug和修复方法,我于是请Steve为PIE详细描述了"Guest Demo"。在准备演示的期间,Steve发现这个办法同样修复了双倍边界Bug,一个更为普遍的难题。Steve是个忙人,他让我写这篇"有深度的"演示页利用这个方法将Bug本身解释得更全面。
起初我开展Guest Demo难题是为了鼓励别人来关注各式各样的CSS显示难题(并为我避免如此多的艰巨工作)。
好!按照计划进行顺利。勇往直前,Steve! :-)
分享到:
相关推荐
所谓的IE6双倍边距就是指当元素有float属性,又有margin属性时,在IE6下面显示的margin的值是设置值的两倍。下面的代码: 折叠展开XML/HTML Code 复制代码代码如下: <div xss=removed> <div xss=removed></div> ...
IE6下出现双倍margin的解决方法,IE6下出现双倍margin的解决方法
margin值在IE6变成双倍 margin值在IE6变成双倍 margin值在IE6变成双倍
IE Bug--浮动对象外补丁的双倍距离的解决方法
css兼容
2、IE6双倍浮动BUG及解决办法 比如 复制代码代码如下: #div1 { float:left; margin-left:10px; width:200px; height:200px; border:1px solid red } 左margin边界设定为了10px,然后IE6却偏偏给你显示成双倍的20...
NULL 博文链接:https://helloklzs.iteye.com/blog/1305519
c#的3DES加密解密强制要求不能使用简单的密钥,这里按照3DES双倍长的算法原理,实现双倍长的加密解密
前两天看的《IE6 很邪恶,但我爱它的盒子模型》,我说盒子模型如何如何,面试官告诉我IE5的盒子模型有问题,不是IE6。 回来查查书,《Web标准实战》上说了,是IE5/Win的盒子模型有问题。看来CSS还是不够精通。 特...
大四了,把之前学的些东西整理整理分享给大家,适合老师网页设计教材及初学者,里面包含了以下内容: 1、固定宽度CSS版式布局 2、自适应(弹性)宽度CSS版式布局 ... IE6双倍边距bug 4、盒模型层次平面示意图和3D示意图
cad超级实用工具-CAD双倍加速插件.zip
IE6的双倍边距BUG IE6下绝对定位的容器内文本无法正常选择的问题 IE6下为什么图片下方有空隙产生 IE6下这两个层中间怎么有间隙 list-style-image无法准确定位的问题 LI中内容超过长度后以省略号显示的方法 web标准中...
固定资产折旧年数总和法、双倍余额递减法培训课件.pptx
双倍余额递减折旧法_Excel DDB函数的应用.rar,本例分别介绍DDB函数的最后一期折旧额转为净值减残值的差额和不转的两种情况。例中所使用算术公式与DDB函数相互验证公式结果的正确性,并且提供会计中定义的双倍余额...
2、IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距) 解决方法:display:inline 3、以下三种其实是同一种bug,其实也不算是个bug,举个例子:父标签高度20,子标签11,垂直居中,20-11=9,9要分给文字...
Des加解密(单双倍)、Mac运算、XOR运算、分散运算(简单易用测试小工具)
双倍工资时效.doc