按标签归档 hasLayout

haslayout引起的IE6 :hover失效

大家都知道IE6之支持<a>标签的:hover为了，但是通常在做实际效果的时候<a>标签 :hover在IE6下会失效，
看代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
a:hover { }
a:hover span{color:#F00;}
</style>
</head>

<body>
<a href="#">鼠标经过时改变我的<span>颜色</span></a>
</body>
</html>

在IE6下“颜色”根本就不会变成红色，其他浏览器都是好的，要解决这个问题就必须触发a:hover的layout，例如a:hover { display:inline-block}或者a:hover { zoom:1}等等。

【转载】haslayout综合

原文地址：http://www.qianduan.net/comprehensive-haslayout.html
要想更好的理解 css， 尤其是 IE 下对 css 的渲染，haslayout 是一个非常有必要彻底弄清除的概念。大多 IE
下的显示错误，就是源于 haslayout。
什么是 haslayout ？
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）
当一个元素有一个布局时，它负责对自己和可能的子孙元素进行尺寸计算和定位。简单来说，这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。因此，一些元素默认会有一个布局。当我们说一个元素“拥有layout”或“得到layout”，或者说一个元素“has layout” 的时候，我们的意思是指它的微软专有属性 hasLayout 被设为了 true 。一个“layout元素”可以是一个默认就拥有 layout 的元素或者是一个通过设置某些 CSS 属性得到 layout 的元素。如果某个HTML元素拥有 haslayout 属性，那么这个元素的 haslayout 的值一定只有 true，haslayout 为只读属性 一旦被触发，就不可逆转。通过 IE Developer Toolbar 可以查看 IE 下 HTML 元素是否拥有haslayout，在 IE Developer Toolbar 下，拥有 haslayout 的元素，通常显示为“haslayout = -1”。

【转载】拥有布局 IE haslayout

原文：http://adamghost.com/2009/03/ie-has-layout-and-bugs-zh/
找们那知道浏览器有bug，而且Windows上的lE的bug 似乎比太多数浏览器都多。IE/Win的衣现与其他浏览器不同的原因之一是，显示引擎使用一个称为布局(layout)的内部概念。因为布均是一个专门针对显示引擎内部工作方式的概念，所以一般悄况下不需要了解它。但是，布局问题是许多IE/Win显示bug的根源，所以理解这个概念以及它如何影响CSS是有捂助的。
什么是布局
Windows 上的IE 使用布局概念来控制元素的尺寸和定位。那些称为拥有布局(have layout)的元素负责本身及其子元素的尺寸和定位。如果一个元旦在没有拥有布局，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
IE 显示引擎利用布局概念减少它的处理开销。在理想悄况下，所有元素都控制自己的尺寸和定位。但是，这会在IE中导致很大的性能问题。因此，IE/Win 开发团队决定只将布局应用于实际需要它的那些元素，这样就可以充分地减少性能开销。
在默认情况下拥有布局的元素包括:

body
标准模式中的 html
table
tr, td
img
hr
input, select, textarea, button
iframe, embed, object, applet
marquee

布局概念是Windows 上的I E 特有的，而且它不是CS S 属性.尽管某些CSS 属性会使元ffi拥有布局，但是在CSS 巾无法显式地设宣布局.可以使用JavaScript 函数hasLayout 查看一个元亲是否拥有布局.如果元素拥有布局，这个函数就返回true ; 否则返回falseo hasLayout 是一个只读属性，所以无法使用JavaScript 选行设置.

【转载】On having layout

这篇文章太好了，出处：http://old9.blogsome.com/2006/04/11/onhavinglayout
译者注：一篇很好的文章，很久以前在blog上就推荐过，这两天断断续续花了点时间翻译了一下，推荐读读。
英文原文在此。
http://www.satzansatz.de/cssd/onhavinglayout.htm
文中所有的 layout 这个单词都未作翻译，一来本身这个单词意思就比较多，翻成啥都觉得别扭，二来它也是专有的属性，所以就意会一下吧。水平有限，很多地方都是模模糊糊地意译，发现错误欢迎留言指出。
引用一段来自Dean Edwards
的评价：
I recommend that every CSS designer and DOM scripter read this. Understanding “layout” gives a huge insight into lots of other IE bugs and idiosyncrasies.
(Dean Edwards)
4月16日修订的内容：
将quirks模式这一部分单独移动到一篇文章中讲述。
添加：边缘裁切。
添加：收缩包围(shrink-wrapping)现象。
5月17日修订的内容：
重写了了浮动元素旁边的元素这一部分。
部分章节小的修正：属性，有关内联级别元素，CSS hacks。
重新整理了部分章节的语言：定义，数据，问题种种，分析，清除浮动和自动扩展适应高度，绝对定位元素。
On having layout
本文修订中
当前版本：Rev. 7 2006–05–17
http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html
修订历史
http://www.satzansatz.de/cssd/layoutchangelog.html
各种语言版本
目录

【转载】IE hasLayout详解

网上转载过来的文章，都不知到谁是真正的作者和翻译者了，但在这里让我们感谢作者和翻译者，共享万岁！
注：hasLayout已经被IE8淘汰。
————————————————————————
IE的haslayout是个很纠结的东西，掌握好CSS就得掌握好它。初学CSS时走了很多弯路，以下几篇文章在我的学习中起了很大的作用，希望能让大家受益。
拥有layout概述
Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其”layout”得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为”尺寸臭虫(dimensional bugs)”[32]，意思是这些臭虫可以通过赋予相应元素某个宽度或高度解决。
“Layout”是一个 Internet Explorer for Windows的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件、用户事件等。这种渲染特性可以通过某些 CSS 属性被不可逆转地触发。而有些 HTML 元素则默认就具有”layout”。
微软的开发者们认为元素都应该可以拥有一个”属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 hasLayout，这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。了解hasLayout将对IE的臭虫会有更多深入的体会甚至解决方案。