项目中使用的是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>

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

  1. 计算机在未关机的情况下重启,系统已在未先正常关机的情况下重新启动。游戏就断电重启。...

    我现在使用的为win10,正常使用计算机并没有什么异常,都OK的,但是最近(我已经正常使用该电脑1年时间了)只要玩游戏就会自动断电重启,而且不是打开游戏就重启,而是等待游戏载入进去之后就重启(话说是从 ...

  2. UE4 无网环境下(禁用网络、网线断了等)情况下如何使用像素流送(pixelstreaming)

    硬件解决(实施最简单): 需要一根网线和一个路由器 这样就行了 软件解决: 暂时没找到合适的解决办法,原因是视频流必须要经过网卡走环回接口(127.0.0.1)来传输视频流

  3. selenium定位svg标签下元素

    问题描述: 使用Xpath方法对svg下元素进行定位,会发现无法定位到svg下的元素 Xpath写法:driver.find_element(xpath,"//*[@id='userinfo ...

  4. 什么情况下可以不写PHP的结束标签“?”

    我们经常看到有些PHP文件中的代码是只有开始标签,而没有结束标签的,那么什么情况下可以不写这个结束标签,而什么情况下必须写?先来看2个例子: 下面的代码正常运行: <?php echo 1234 ...

  5. 如何在时间紧迫情况下进行机器学习:构建标记的新闻 数据 库 开发 标记 网站 阅读1629 原文:How we built Tagger News: machine learning on a

    如何在时间紧迫情况下进行机器学习:构建标记的新闻 数据 库 开发 标记 网站 阅读1629  原文:How we built Tagger News: machine learning on a ti ...

  6. 如何在命令长度受限的情况下成功get到webshell(函数参数受限突破、mysql的骚操作)...

    0x01 问题提出 还记得上篇文章记一次拿webshell踩过的坑(如何用PHP编写一个不包含数字和字母的后门),我们讲到了一些PHP的一些如何巧妙地绕过数字和字母受限的技巧,今天我要给大家分享的是如 ...

  7. 在word2015中的条形图在灰度的情况下不明显

    在word里面有的条形图在有颜色的情况下显示比较明显,但是一旦变成灰度的情况下就不是很明显了,锁以我们要进一步对图片进行调整. 步骤一.如图所示的图形在颜色严厉的情况下,颜色差别非常大,但是在灰度的情 ...

  8. 《窃听风云》中手机在关机情况下被监听是真的吗?

    <窃听风云>中手机在关机情况下被监听是真的吗?     昨天晚上去了一部电影--<窃听风云>.三里屯的美佳欢乐影城搞活动,9点半以后半价35元.电影总的来说还是不错的,喜欢炒股 ...

  9. 求一颗二叉排序树查找成功和失败情况下的平均查找长度

    /** *    实验题目: *        求一颗二叉排序树查找成功和失败情况下的平均查找长度 *    实验目的: *        掌握二叉排序树的查找过程及其算法设计 *    实验内容: ...

最新文章

  1. 第二章 选择符和属性
  2. 几种在shell命令行中过滤adb logcat输出的方法
  3. java实现多对多关系的方法_Hibernate一对多关联双向关联代码实现分享
  4. bzoj千题计划287:bzoj1228: [SDOI2009]ED
  5. matlab 读取图片后分区域编号_你的第一个有限元求解器——仅十行MATLAB代码
  6. antd select多选_关于antd Select 限制选择个数的解决方案
  7. 前大厂员工谈中美企业区别,中企不用单元测试,仅靠QA检查代码?
  8. HTML sublime :Please wait a bit while PyV8 binary is being downloaded 及代码和注释颜色 ,大小调节
  9. Java菜鸟教程怎么用_菜鸟教程 Java 学习笔记 (基础教程)
  10. 塑料成型计算机模拟技术,塑料成型模拟软件技术基础与应用
  11. MCU设计电路的总结
  12. vb6判断操作系统版本-从win95到win7
  13. galgame安卓_史上最强教程!教你如何在安卓和ios上运行GALgame!
  14. java中文件路径的两种写法说明:左斜杠(/)和右斜杠(\)
  15. 如何通过SEO思维收割各大平台的流量?
  16. ERA5再分析资料下载
  17. [好文精选] Behance 2019 设计趋势
  18. 微信新版本(6.6.7)功能设计背后的逻辑及需求
  19. 换个姿势「模拟登录」
  20. 2021-10-28 集训第三天 神奇的Tom猫

热门文章

  1. web前端黑客技术揭秘 10.关于防御
  2. POJ 3415 Common Substrings
  3. log4j, common-logging, slf4j 关系
  4. C语言中的sizeof中的数组和指针
  5. 使用pipeline的函数
  6. Vs 正则表达式 查找替换 微软权威参考
  7. 标准差 标准误 偏度系数和峰度系数的作用
  8. wps定位对话框快捷键_F1~F12快捷键,高效办公的12个方法
  9. iphone无线服务器未响应,iPhone无线充电断断续续或无法充电是什么原因?
  10. W7程序计算机面板介绍,win7系统隐藏任意程序运行界面的详细步骤