定义了浮动元素后margin-bottom失效的解决办法
来源:互联网 发布:浏览器打不开淘宝链接 编辑:程序博客网 时间:2024/04/28 01:18
虽然IE6慢慢的退出市场了,但是还是有必要了解一些兼容问题,让自己的知识有一个更好的沉淀。margin-bottom的bug是容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。
在 IE6 IE7 IE8(Q)中,容器div的 'zoom:1' 触发了 hasLayout,其内部浮动子元素也参与到了容器的高度计算之中。但是浮动子元素设置的 'margin-bottom' 消失;
在其他浏览器中,容器的 'overflow:hidden' 创建了新的 Block Formatting Context ,同样,其内部浮动子元素也参与到了容器的高度计算之中。浮动子元素的四个方向的 margin 均正常。
例子:第一个div子元素设置了底部的margin值,在清除浮动之后无效
<!doctype html><html><head><meta charset="UTF-8"><title>浮动元素的影响</title><style>*{margin: 0;padding: 0;}.con-float-box{width: 600px;border: 1px solid #f00;}.con-float-box div{float: left;width: 198px;height: 98px;margin: 20px 0;border: 1px solid #00f;}.box-pos{width: 600px;height: 100px;margin-top: 10px;border: 1px solid #000;background: #ccf;}.clearfix:before,.clearfix:after {content: "\200B";display: block;height: 0;overflow: hidden;}.clearfix:after {clear: both;}</style></head><body><div class='con-float-box clearfix'><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div><div class='box-pos'>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div></body></html>
解决方案
为容器显式地设置高度。若容器高度不定,则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性,可以通过为容器设置 'padding-bottom' 达到相似的效果。
只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值,这三个条件中任意一项,均可解决此问题。
以上就是今天E良师益友网对定义了浮动元素后margin-bottom失效的解决办法详解了,如果还有不明白的同学,不妨去看看本站提供的HTML视频教程哦!
0 0
- 定义了浮动元素后margin-bottom失效的解决办法
- 关于IE6/IE7中浮动元素margin-bottom值失效的问题解决办法。
- margin-bottom在IE6和IE7下失效的解决办法
- margin-bottom在IE6和IE7下失效的解决办法
- margin-bottom在IE6和IE7下失效的解决办法
- IE7下浮动元素margin-bottom失效
- 修复IE6,7--DIV浮动情况下margin-bottom失效
- IE6关于浮动、margin-bottom的兼容问题
- IE7-/Win: 在浮动元素后的定义了“position:absolute”的元素框可能会消失
- 【转】margin-bottom在IE6和IE7下失效的解决办法
- 浮动元素后元素外边距失效
- margin-top失效的解决办法
- 另一个IE6关于浮动、margin-bottom的兼容问题
- 非浮动元素的margin对浮动元素无效
- 关于margin-top失效的解决办法
- margin-bottom float IE7/IE6 失效
- 给子元素设置了margin后,父元素的跟着一起动了
- 闭合浮动,元素浮动或绝对定位后失去文档流的友好解决办法
- 153er1f6a135f1s3df13a1f35a1f3a1fasfasdfas
- JAVASCRIPT中NULL值,特别注意的两点
- 使用maven profile实现多环境可移植构建
- HttpClient4.x进行Get/Post请求并使用ResponseHandler处理响应
- Windows上简单配置端口转发
- 定义了浮动元素后margin-bottom失效的解决办法
- SpringMVC内容概要
- C++空类默认函数(编译器处理)
- Java并发编程:线程池的使用
- jquery获取地址栏的get参数
- insideComputing博客笔记
- Python的Socket学习
- 一步一步学习TypeScript(15.Abstract Classes_抽象类)
- 记录高级编程一些东西