【翻译】IE6-/Win:块锚点的可点击区域和hasLayout
原文链接：IE6-/Win: Clickable area of block anchors and hasLayout
在IE6-中，hasLayout影响块元素的可点击/可悬停区域（锚点，或者任何带有附加的onclick/onmouseover事件处理程序的任何元素）。通常hasLayout=false只有被文字覆盖的部分是可感知的。带有hasLayout=true的整个块区域是可感知的。
在所有的下列测试例子中，有一个带有黑边和指定宽度的容器，并且hasLayout=true（除非标出）。在它里面有一些display:block和:hover 背景颜色改变的锚点。或者（为了展示行为是相同的）有一些带有改变背景颜色的onmouseover事件处理程序的div元素。
通常在菜单和导航栏中需要能全部可点击/可悬停的块元素。在真实例子中这样的结构使用列表标记。所有观察到的行为使用列表都是可重现的，but further quirks occur，因此为了保持情况简单本页只使用了div元素。
测试1.可悬停元素的hasLayout=true。在IE6中只有文字部分是可感知的。甚至行之间的空间（这里较大，由于比正常line-height更高）都不是可感知的。
测试2.可悬停元素的hasLayout=ture。它们的整个矩形区域都是可感知的。
测试3.上面的例子有很多变种。首先，只给元素集合中的一个设置layout足以影响所有元素的行为。
测试4.如果外部容器没有Layout，那么内部元素即使没有hasLayout也是全部敏感的。不幸的是几乎很少能处于这样的条件（尝试用一个中间的no-hasLayout包装器是不行的）
测试5.添加position:relative到内部元素可以是它们大部分（但不是全部）可感知的。在其它的一些场合，position:relative似乎只能实现和hasLayout的功效，并带来更多的问题。
测试6.有一个图片在内部：这似乎足以使整个区域是可感知的。
Line 2 Lorem ipsum dolor sit amet
, consectetuer adipiscing elit. A block anchor, hasLayout=false.Line 2 Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa.
测试7.以上的是一件幸运的事情。事实上，当除了图片之外，是hasLayout，在IE5.0中图片变成不可点击（这可能是个大问题如果是有内容）。还有其它一些hasLayout导致链接中的不可点击图片（not clickable images in links）的情况，在所有的IE7-/Win.
Line 2 Lorem ipsum dolor sit amet
, consectetuer adipiscing elit. A block anchor, hasLayout=true.Line 2 Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa.
测试8.可悬停元素有hasLayout=true和底部空白。上下移动鼠标，空白消失又重新出现。没有hasLayout这个问题将不会出现。（但是当然锚点不是全部可感知的）。幸运的是有很多方方式来避免问题和维持锚点全部可感知，例如只给第一个hasLayout，正如在测试2中。在IE7中这个问题不再出现，但仍然有由于hasLayout导致的在悬停时底部空白跳动（jumping bottom margins at hover）的情况。
测试9.锚点中的一个内部有一个悬浮的span。锚点的整个区域都是可感知的。连同测试6,这引导思考锚点中的一个内部有任何有hasLayout的元素将触发这个区域的可感知。
qishichang
