The hasLayout property is a very important consideration when designing for IE. A surprising number of IE rendering bugs are triggered by an element not having layout.
For example, have you ever applied a CSS background-image to a <div> tag, only to find out that IE does not show the background image (floats usually have to be involved to trigger this bug)? Giving the <div> layout will fix this.
Another bug: Ever tried to apply "display: block" to an <a> tag, with the goal of creating a large clickable area? In IE 6, only the text is clickable unless hasLayout is triggered.
hasLayout is triggered by a few CSS styles:
- overflow: hidden (IE7+ only)
- position: absolute
- height
- width
- zoom: 1
Inspecting an element with the IE Developer Toolbar will show you if an element has layout or not.
The best reference for haslayout that I've come across:
Link: http://haslayout.net/haslayout
No comments:
Post a Comment