IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
2012-03-29 10:33
567 查看
项目中使用的是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,达到内容自动扩充。代码如下:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
通过搜索发现是发现问题的答案:
链接地址是: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,达到内容自动扩充。代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>元素"padding-top"会出现"padding-bottom" in IE7中</title>
<style type="text/css">
body
{
padding:0;
margin:0;
}
.clearfix
{
clear:both;
height:0;
}
#container
{
background:#CCC;
border:2px solid black;
padding-top:10px;
}
.leftpanel
{
float:left; width:50px; height:100px; background:#666;
}
.rightpanel
{
float:left; width:500px;background:green;
}
</style>
</head>
<body>
<div id="container">
<div class="leftpanel">Left Panel Content Here!</div>
<div class="rightpanel">Right Panel Content Here!Right Panel Content Here!
Right Panel Content Here!Right Panel Content Here!
Right Panel Content Here!Right Panel Content Here!<div class="clearfix"></div></div>
<div style="clear:both;"></div>
</div>
</body>
</html>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
相关文章推荐
- IE6IE7IE8(Q) 中元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
- 行内元素为何不能设置margin-top、margin-bottom;padding-top、padding-bottom值
- ie6,ie7下,img放在li中,给li设置padding属性时,padding-bottom多出奇怪的距离解决方案
- SD9018: IE6 IE7 IE8(Q) 在某些情况下 DOM 元素的 offsetTop、offsetLeft 的返回值参照元素以及 offsetParent 为距离其最近的触发了 hasLay
- IE5.5 IE6 中浮动元素在某些情况下会有双倍外边距
- IE5.0 IE5.5 IE6 中浮动元素在某些情况下会有双倍外边距
- ie6 ie7下使用clear不能将浮动的元素换行问题
- IE 中单元格的 colspan 属性在某些情况下会影响 TABLE 元素的自动布局
- 一个IE7下,用form表单跳转iframe提交,然后下载文件。遇到的很有意思的问题
- 已开启GTID的情况下的binlog复制切换到GTID复制可能会遇到的问题
- EDM排版table设置padding在ie7下bug
- margin-left,margin-bottom,margin-top,padding,padding-bottom,border-bottom的说明
- 解决ie6、ie7下float为right换行的情况
- 解决IE6,ie7下元素左浮动自动换行的问题
- ListView 使用overscroll的情况下 消除mEdgeGlowTop 和 mEdgeGlowBottom
- IE9下,原生JS设置元素left和top属性为数值不生效
- 自适应按钮在IE6、IE7下的左右padding值
- 解决css中flex布局的元素有padding情况下各弹性元素width出现的问题
- 解决ie6、ie7下float为right换行的情况
- IE、FF padding-top兼容性问题