hasLayout引发的CSS Bug表

本文将详细探讨由IE浏览器特有的hasLayout属性引发的CSS Bug表，涉及的知识点包括hasLayout的定义、特点、触发条件以及具体的Bug案例和解决方案。为了便于理解，我们将分几个部分阐述这些知识点。 hasLayout是IE浏览器（尤其是IE6和IE7）特有的一个内部属性。这个属性决定了一个元素如何计算自己的尺寸和位置。如果一个元素的hasLayout属性为true，即触发了布局，那么这个元素将独立地对自己的内容进行布局计算，不依赖于其父元素。相反，如果hasLayout为false，则该元素依赖于其父元素进行布局计算。由于这一特性，当元素拥有layout时，浏览器在处理这些元素时需要消耗更多的资源，可能会导致性能问题。 在IE6、IE7、IE8等版本的IE浏览器中，某些特定的CSS属性值会触发hasLayout，使元素拥有独立的布局能力。这些属性包括但不限于以下几点： 1. display: inline-block 2. height: 除了auto之外任何值 3. width: 除了auto之外任何值 4. float: left或right 5. position: absolute 6. writing-mode: tb-rl（垂直文本排版） 7. zoom: 除了normal之外任何值 对于IE7，新增了一些属性值能触发hasLayout： 1. min-height: 任意值 2. min-width: 任意值 3. max-height: 除了none之外任意值 4. max-width: 除了none之外任意值 5. overflow: 除了visible之外任意值，适用于块级元素 6. overflow-x: 除了visible之外任意值，适用于块级元素 7. overflow-y: 除了visible之外任意值，适用于块级元素 8. position: fixed 由于hasLayout的存在，导致了一系列与之相关的Bug。这些Bug通常涉及到元素的定位、尺寸、继承、溢出处理等方面。在实际开发中，我们可能会遇到以下情况： 1. IE8中，input、button或submit元素未居中显示。 2. IE6和IE7中，滚动条没有被隐藏，即使设置body{overflow:hidden;}。 3. IE6和IE7中，包含hasLayout属性的标签默认具有高度。 4. 在form元素中，如果父元素包含hasLayout属性，子元素如input或textarea出现加倍的margin-left。 5. IE6和IE7中，父元素设置overflow: hidden或auto时，其拥有position: relative的子元素会显示为position: visible状态。 6. IE8中，th元素不会自动继承上级元素的text-align样式。 为了解决上述Bug，我们可以采取一些措施： - 给未居中的元素添加display: block或width属性。 - 对于IE6和IE7中的滚动条问题，可以将overflow设置为hidden，并在body标签上添加 Overflow: hidden; *height: 0。 - 解决hasLayout元素子元素出现加倍margin-left的问题，可以通过调整margin-left的值或使用*margin-left。 - 为th元素添加text-align: inherit属性，使其继承上级元素的text-align。 - 针对PNG图片中的颜色显示问题，可以使用pngcrush工具去除图片中的Gamma profiles。 除了上述Bug和解决方案，还有一些常见的CSS知识需要注意： - IE6-8中，使用margin: 0 auto; 不能使block元素水平居中。 - 在IE6中，使用伪类:first-line或:first-letter时，属性值中出现!important可能会使属性失效。 - List中浮动图片可能会出现位置溢出或无list-style样式问题，可以使用背景图片来替代。 - IE8中，设置了max-height或max-width为none的元素不会获得溢出效果。 - IE6-8中，对PNG图片应用的 GAMMA profile 可能会导致显示问题，需要通过工具处理以获得正确的颜色渲染。 通过本文对hasLayout引发的CSS Bug的介绍和分析，开发者可以更好地理解IE浏览器在CSS渲染方面的特殊性，从而在跨浏览器兼容性开发中采取合适的策略和解决方案。