由布局学习CSS——IE6的EmptyElementHeightBug

对于一个空的div,对这个div设置了宽度,但是没有设置高度时,在IE6和IE7下面默认情况下会拥有高度。这样的用法多用在清除浮动的方法中,在清除浮动的三大方法中,有一个方法就是添加一个空元素。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css" rel="stylesheet">
.emptyWithBug
{background-color:red; width:90%;}
.emptyWithNoBug
{background-color:green; width:90%; height:0; overflow:hidden;}
</style>

</head>
<body>
<div class="emptyWithBug"></div>
<div class="emptyWithNoBug"></div>
</body>

</html>

对于这个bug修复也比较简单,对于IE7只需要将高度设置为0,对于IE6还要设置它的overflow:hidden。

根本原因:

IE6 IE7 IE8(Q) 中触发 hasLayout 的空块级非替换元素的高度不为 0。并且这个高度跟 'font-size' 有关。然而,'font-size' 是 0 的块级非替换元素的高度也不是 0。

名词解释:

触发hasLayout:

'Layout' 是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算,与其他元素的关系和相互作用,以及对应用还有使用者的影响。

  • 概念说明:
    • 'Layout' 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout 。
    • 'Layout' 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout 。
    • 'Layout' 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 'hasLayout' 属性,属性值可以为 true 或 false。 当一个元素的 'hasLayout' 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。
  • 触发方式:
    • 默认拥有布局的元素:
      <html>, <body>
      <table>, <tr>, <th>, <td>
      <img>
      <hr>
      <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
      <iframe>, <embed>, <object>, <applet>
      <marquee>
      
    • 可触发 hasLayout 的 CSS 特性:
      display: inline-block
      height: (除 auto 外任何值)
      width: (除 auto 外任何值)
      float: (left 或 right)
      position: absolute
      writing-mode: tb-rl
      zoom: (除 normal 外任意值)
      
    • IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout :
      min-height: (任意值)
      min-width: (任意值)
      max-height: (除 none 外任意值)
      max-width: (除 none 外任意值)
      overflow: (除 visible 外任意值,仅用于块级元素)
      overflow-x: (除 visible 外任意值,仅用于块级元素)
      overflow-y: (除 visible 外任意值,仅用于块级元素)
      position: fixed
      
    • IE6 以前的版本(也包括 IE6 及以后所有版本的混杂模式,其实这种混杂模式在渲染方面就相当于 IE 5.5), 通过设置任何元素的 'width' 或 'height'(非auto)都可以触发 hasLayout ; 但在 IE6 和 IE7 的标准模式中的行内元素上却不行,设置 'display:inline-block' 才可以。

块级非替换元素:

replaced element is any element whose appearance and dimensions are defined by an external resource. Examples include images (<img> tags), plugins (<object>tags), and form elements (<button><textarea><input>, and <select> tags). All other elements types can be referred to as non-replaced elements.

posted @ 2012-03-27 20:09  shawnXiao  Views(291)  Comments(0Edit  收藏  举报