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>
<!-- .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; } -->

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小二的折腾日记

Sublime Text3使用总结

保存为Sublime Text3\Packages\User\addCurrentTime.py

722
来自专栏快乐八哥

IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'

项目中使用的是DIV+CSS布局,有一个页面是同事完成的,这几天他请假有事。项目发现一个UI Bug。在IE7下,某一个Div的padding-top会让整个d...

2035
来自专栏专业duilib使用+业余界面开发

一点WM_ACTIVATE消息的说明记录

1854
来自专栏前端技术总结

附实例!实现iframe父窗体与子窗体的通信

本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。

1.6K76
来自专栏Theo Tsao

Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题

今天做了一个登录注册页,iOS 端毫无 bug,Android 端却出现了问题。当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看,...

1072
来自专栏慎独

Unity项目目录架构和命名规则

4343
来自专栏Timhbw博客

Markdown编辑器推荐–MarkdownPad

2016-03-1008:56:41 发表评论 406℃热度 如果安装碰到渲染错误问题,请点击。 Markdown Markdown是一种可以使用普通文本编...

39812
来自专栏逍遥剑客的游戏开发

打造最小的DirectX安装程序

1603
来自专栏.NET开发者社区

一步一步创建ASP.NET MVC5程序[Repository+Autofac+Automapper+SqlSugar](五)

时间飞逝,一个星期又过去了,今天还是星期五,Rector在图享网继续跟大家分享系列文本:一步一步创建ASP.NET MVC5程序[Repository+Auto...

23510
来自专栏偏前端工程师的驿站

CentOS6.5菜鸟之旅:中文编辑器忍痛放弃Sublime

一、前言                                 Windows下习惯使用Sublime作为编辑器,谁知道Linux下的Sublime是...

2036

扫码关注云+社区

领取腾讯云代金券