IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
项目中使用的是DIV+CSS布局,有一个页面是同事完成的,这几天他请假有事。项目发现一个UI Bug。在IE7下,某一个Div的padding-top会让整个div产生padding-bottom样式。在IE8/9、Firefox、Chrome下都是OK。
通过搜索发现是发现问题的答案:
链接地址是:http://w3help.org/zh-cn/causes/RM1010
在项目开发过程中,开发人员为了让div的高度随着内容自动增加,所以经常在div的关闭之前会添加一个类似clearfix的div。这个div的结构如下:
<div class=”clearfix”> </div> 样式是: .clearfix{clear: both;}。通过上面链接的解释是未触发hasLayout 特性。平时对这个特性接触的不多,所以不是很明白。
但是之前的项目我们也未采用链接所说的解决方案,但是项目的兼容性是很不错的。后来通过查看之前项目的代码,我们在给最外层的div添加一个高度时,padding-bottom样式不会出现。但是我们此时内容无法自动扩充。
所以在需要自动扩展内容的div中嵌入一个<div class=”clearfix”></div>,此时最外层不能添加height,达到内容自动扩充。代码如下:
1: <html xmlns="http://www.w3.org/1999/xhtml"> 2: <head> 3: <title>元素"padding-top"会出现"padding-bottom" in IE7中</title> 4: <style type="text/css"> 5: body 6: { 7: padding:0; 8: margin:0; 9: } 10: .clearfix 11: { 12: clear:both; 13: height:0; 14: } 15: #container 16: { 17: 18: background:#CCC; 19: 20: border:2px solid black; 21: padding-top:10px; 22: 23: } 24: .leftpanel 25: { 26: float:left; width:50px; height:100px; background:#666; 27: } 28: .rightpanel 29: { 30: float:left; width:500px; background:green; 31: } 32: </style> 33: </head> 34: <body> 35: <div id="container"> 36: <div class="leftpanel">Left Panel Content Here!</div> 37: 38: <div class="rightpanel">Right Panel Content Here!Right Panel Content Here! 39: Right Panel Content Here!Right Panel Content Here! 40: Right Panel Content Here!Right Panel Content Here!<div class="clearfix"></div></div> 41: <div style="clear:both;"></div> 42: </div> 43: </body> 44: </html>
本文基于
知识共享署名-非商业性使用-相同方式共享
3.0 中国大陆许可协议发布,欢迎转载,演绎,但是必须保留本文的署名liminjun88(包含链接http://www.cnblogs.com/liminjun88/),且不得用于商业目的。如您有任何疑问或者授权方面的协商,请与我联系
。