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”>&nbsp;</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>

你可能感兴趣的:(padding)