由布局学习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' 才可以。
- 默认拥有布局的元素:
块级非替换元素:
A 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.