项目中使用的是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>
8451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
