IE6-/win: clickable area of block anchor and haslayout

Original article:IE6-/Win: Clickable area of block anchors and hasLayout

In IE6-, hasLayout affects the clickable/hovering area of block elements (anchor, or any element with an additional onclick/onmouseover event handler ). Generally, hasLayout = false is perceptible only for the text covered. The entire block area with hasLayout = true is perceptible.

In all of the following test examples, there is a container with a black edge and a specified width, and hasLayout = true (unless marked ). There are some positioning points in it that show: block and: hover background color changes. Or (to demonstrate the same behavior) There are some div elements with the onmouseover event handler that changes the background color.

Generally, you need all the block elements that can be clicked or hashed in the menu and navigation bar. In a real example, such a structure uses the list tag. All observed behavior Use lists are reproducible, but further quirks occur, so to keep it simple, this page only uses the div element.

Test 1. hasLayout = true for the element that can be hovering. In IE6, only the text is perceptible. Even the space between rows (larger here, because it is higher than normal line-height) is not perceptible.

A block anchor, hasLayout = false.
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. A div, hasLayout = false.
Line 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A div, hasLayout = false.
Line 2 Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa.

Test 2. hasLayout = ture of the element that can be hovering. Their entire rectangular area is perceptible.

 

A block anchor, hasLayout = true.
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. A div, hasLayout = true.
Line 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A div, hasLayout = true.
Line 2 Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa.

Test 3. There are many variants in the above example. First, only setting layout in the element set can affect the behavior of all elements.

 

A block anchor, hasLayout = false.
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. A block anchor, hasLayout = false.
Line 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Test 4. If the external container does not have Layout, the internal elements are all sensitive, even if there is no hasLayout. Unfortunately, there are very few such conditions (it is not possible to try a middle no-hasLayout package)

 

A block anchor, hasLayout = false.
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.

Test 5. Add position: relative to internal elements which are mostly (but not all) perceptible. In other cases, position: relative seems to be only able to implement hasLayout and bring more problems.

 

A block anchor, hasLayout = false.
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.

Test 6. There is an image inside: this seems to make the entire area perceptible.

 

A block anchor, hasLayout = false, with an image inside.
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.

Test 7. The above is a lucky thing. In fact, in addition to images, it is hasLayout. In IE5.0, images become unclickable (this may be a big problem if there is content ). There are other situations where hasLayout causes the link to be unable to click images (not clickable images in links) in all IE7-/Win.

 

A block anchor, hasLayout = true, with an image inside.
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.

Test 8. Hover elements include hasLayout = true and white spaces at the bottom. Move the mouse up and down, and the white space disappears and appears again. This issue will not occur without hasLayout. (But of course the anchor is not all perceptible ). Fortunately, there are many ways to avoid problems and maintain all the perceptible points. For example, just give the first hasLayout, as in Test 2. In IE7, this problem does not occur any more, but there are still some situations where the bottom space is beating (jumping bottom margins at hover) due to hasLayout.

 

A block anchor, hasLayout = true. A block anchor, hasLayout = true. A block anchor, hasLayout = true. A block anchor, hasLayout = true. A block anchor, hasLayout = true. A block anchor, hasLayout = true. A block anchor, hasLayout = false. A block anchor, hasLayout = false. A block anchor, hasLayout = false. A block anchor, hasLayout = false.

Test 9. One of the anchor points has a floating span. The whole area of the anchor is perceptible. Together with Test 6, this directs you to think that any element with hasLayout inside the anchor will trigger the perception of this region.

A block anchor, hasLayout = false.
Line 2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. A block anchor, hasLayout = false float, with a float inside.
Line 2 Maecenas nunc nulla, lobortis eu, eleifend eu, venenatis non, massa.