IE7下元素的 'padding-top' 遇到 'clear' 特性在某些情况下复制到 'padding-bottom'
时间:2022-04-22
本文章向大家介绍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”> </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; } -->
- 重温delphi之控制台程序:Hello World!
- Docker集中化web界面管理平台-Shipyard部署记录
- "Goole项目托管"及"CodePlex发布开源项目"要点
- Docker网络解决方案-Calico部署记录
- c#中开发ActiveX的学习笔记
- Android新手之旅(4) 通过HTTP访问web
- Flash/Flex学习笔记(9):ActionScript3.0与Javascript的相互调用
- Flash/Flex学习笔记(8):ActionScript3.0中的面对对象
- Docker网络解决方案-Weave部署记录
- Flash/Flex学习笔记(7):FMS3.5基于IIS的安装
- Netdata---Linux系统性能实时监控平台部署记录
- linux下向一个文件中的某行插入数据的做法
- Flash/Flex学习笔记(2):捕获摄像头
- split-brain 脑裂问题(Keepalived)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一个maskrcnn的目标检测和实例分割的小例子
- Nginx系列:Nginx自带后端健康检查
- 消息队列之推还是拉,RocketMQ 和 Kafka是如何做的?
- Nginx系列:root与alias指令用法的区别
- Redis系列:Linux下部署Redis 6.x 版本
- 分布式锁的封装也很有讲究呀
- PHP与SEO,应用curl及正则获取搜狗搜索相关关键词
- Kafka经典面试题,你都会吗?
- 提高单细胞分析准确度的工具之一:Self-assembling manifolds
- 一不小心肝出了4W字的Redis面试教程
- 双向LSTM-CRF模型用于序列标注
- 容器服务 TKE 上服务暴露的几种方式
- 【论文分享】ACL 2020 信息抽取任务中的新动向
- 工匠人iOS 代码规范
- 写一个通用的幂等组件,我觉得很有必要