IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'-阿里云开发者社区

开发者社区> 开发与运维> 正文

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>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章