问题描述
IE 中触发了 hasLayout 的容器同时使用 'clear' 特性清除浮动在某些情况下导致 'padding-top' 渲染异常。
造成的影响
此问题会导致出现多余的 'padding-bottom' 间隙。
受影响的浏览器
IE6 IE7 IE8(Q) |
---|
问题分析
测试代码:
<div id="d" style="background:#CCC; width:100px; border:5px solid black; padding-top:10px;"> <div style="float:left; width:50px; height:50px; background:#666;">FLOAT</div> <div style="clear:left; background:#999;"></div> <div style="float:left; width:50px; height:50px; background:#666;">FLOAT</div> <div style="clear:left; background:#999;"></div> </div>
上面代码中,容器【d】宽度为100px,有10px的 'padding-top',其内依次包含了一个左浮动 DIV、一个清除 DIV、一个左浮动 DIV、一个清除 DIV。
则此时在各浏览器中的运行效果如下:
各浏览器表现如下:
IE6 IE7 IE8(Q) | IE(Q) FIrefox Chrome Safari Opera |
---|---|
可见:
- 在 IE6 IE7 IE8(Q) 中,容器【d】的 'padding-top:10px' 由于某种原因复制到了其他区域,且无法探测出多余的两处10px间隙作用于哪一个元素;
- 在 IE(Q) FIrefox Chrome Safari Opera 中,按照W3C规范对代码进行了解释。
与 hasLayout 的关系:
测试代码:
<div style="background:#CCC; border:5px solid black; padding-top:10px;"> <div style="float:left; width:50px; height:50px; background:#666; padding:0; margin:0;">FLOAT</div> <div style="clear:left; background:#999; padding:0; margin:0;"></div> <div style="float:left; width:50px; height:50px; background:#666;">FLOAT</div> <div style="clear:left; background:#999; padding:0;"></div> </div> <div style="background:#CCC; zoom:1; border:5px solid black; padding-top:10px;"> <div style="float:left; width:50px; height:50px; background:#666; padding:0; margin:0;">FLOAT</div> <div style="clear:left; background:#999; padding:0; margin:0;"></div> <div style="float:left; width:50px; height:50px; background:#666;">FLOAT</div> <div style="clear:left; background:#999; padding:0;"></div> </div>
上面代码结构与第一节中的相同,第一组取消了 "width:100px" ,即在 IE6 IE7 IE8(Q)中无法触发容器的 hasLayout 特性;第二组在第一组的基础上增加了'zoom:1' ,即在 IE6 IE7 IE8(Q) 中重新触发了容器的 hasLayout 特性。则此时在各浏览器中的运行效果如下:
IE6 IE7 IE8(Q) | IE8(S) FIrefox Chrome Safari Opera |
---|---|
可见,这种情况出现在 IE6 IE7 IE8(Q)中容器触发了 hasLayout 特性且容器内使用了 "clear" 特性清除浮动时产生,此时容器的 "padding-top" 特性有可能在容器内一些区域被复制,从而出现多余间距。
解决方案
方案1.不触发容器的 hasLayout 特性;
方案2. 若容器触发了hasLayout 特性,尽量不为其设置 'padding-top' 特性;
方案3. 若容器触发了hasLayout 特性,且必须为容器设置 'padding-top' 特性,可以考虑使用 ':after' 的清除方式。(用此方法我解决了问题。)
针对方案3的参考代码如下:
<style> #d:after { display:block; content:""; height:0; clear:both; } </style> <div id="d" style="background:#CCC; width:100px; border:5px solid black; padding-top:20px;"> <div style="float:left; width:50px; height:50px; background:#666; padding:0; margin:0;">FLOAT</div> </div>