HTML5学堂-码匠 HTML5学堂

您当前位于:历史兼容问题 ——> 浏览器常见兼容问题-IE6中浮动元素底部外边距失效

浏览器常见兼容问题-IE6中浮动元素底部外边距失效

2015/05/02 20:58:02 | 作者:HTML5学堂(码匠) | 分类:历史兼容问题 | 关键词:兼容问题,IE6,浮动元素,底部外边距失效

浮动元素margin-bottom失效 — IE6盒模型

HTML5学堂:虽然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值,在清除浮动之后无效

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>浮动元素的影响-独行冰海</title>
  6.     <style>
  7.     *{margin: 0;padding: 0;}
  8.     .con-float-box{
  9.         width: 600px;
  10.         border: 1px solid #f00;
  11.     }
  12.     .con-float-box div{
  13.         float: left;
  14.         width: 198px;
  15.         height: 98px;
  16.         margin: 20px 0;
  17.         border: 1px solid #00f;
  18.     }
  19.     .box-pos{
  20.         width: 600px;
  21.         height: 100px;
  22.         margin-top: 10px;
  23.         border: 1px solid #000;
  24.         background: #ccf;
  25.     }
  26.     .clearfix:before,.clearfix:after {
  27.         content: "\200B";
  28.         display: block;
  29.         height: 0;
  30.         overflow: hidden;
  31.     }
  32.     .clearfix:after {clear: both;}
  33.     </style>
  34. </head>
  35. <body>
  36.     <div class='con-float-box clearfix'>
  37.         <div>1</div>
  38.         <div>2</div>
  39.         <div>3</div>
  40.         <div>4</div>
  41.         <div>5</div>
  42.         <div>6</div>
  43.         <div>7</div>
  44.         <div>8</div>
  45.     </div>
  46.     <div class='box-pos'>为第一个div设置了清除浮动的类clearfix,进行了相应的处理,此时,在谷歌浏览器当中正常,但是在IE6,依旧不正常,第7和第8个块底部的margin没有生效。</div>
  47. </body>
  48. </html>

HTML5学堂 IE6下左浮动元素margin-bottom失效 bug h5course

欢迎沟通交流~HTML5学堂

解决方案

为容器显式地设置高度。若容器高度不定,则要避免在触发了 hasLayout 的容器内的浮动子元素上设置 'margin-bottom' 特性,可以通过为容器设置 'padding-bottom' 达到相似的效果。

只要不同时触发父元素hasLayout、子元素左浮动、左浮动子元素拥有非零的 margin-bottom 值,这三个条件中任意一项,均可解决此问题。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端