All pastes #17740 Raw Edit

hasLayout writeup

public text v1 · immutable
#17740 ·published 2005-07-15 11:14 UTC
rendered paste body
1. A bit of history.
MSIE has quite dated rendering engine (not surprising, as IE is based on Mosaic base). In old tabular times, almost any element (except inline content) was a box. There was no way for content to leak from containing table cell, or for table cell to leak out of table...
Many years have passed, and Microsoft began adapting archaic Trident engine to make use of CSS. However, CSS changes the fundamental assumption that old engine was based on - the one that "anything significant" is a rectangle that contains all its content. CSS allows content to overflow out of container. This may happen when content is floated, or if content is too tall/wide to fit inside constrained box.

2. The lame and the blame.
The Microsoft "solution" was the pinnacle of hackery and black magic. They have bolted CSS onto their old engine. We have no idea of what and whether they were thinking, but here's what we got now. Every element in MSIE got boolean hasLayout() property.
When this flag is on, element is a rectangle that is responsible for rendering itself. Therefore, element would be expanded to contain "sticking out things", such as floats or verylongwordswithoutbreaks.
When this flag is off, element does not render itself, and instead hopes that some ancestor with hasLayout set will do the job for it. Unfortunately, IE bugs frequently result in ancestor forgetting to repaint children.

3. What does it mean for a cubicle monkey.
Sometimes, you will see elements not being drawn or repainted right by IE. If the element in question is block level, check if it got hasLayout flag on. The following properties will set the flag:
display		inline-block	
height		any value	
float		left or right	
position	absolute	
width		any value	
writing-mode	tb-rl	
zoom		any value
(table lifted off http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/haslayout.asp )
If none of those are set, element does not have layout and is prone to misrenderings. Try giving it zoom: 1. zoom is a properiary IE feature that should not affect any other browsers. In IE, it will enable hasLayout, potentially solving your problem. You can also use other properties from above list to set hasLayout, but this one appears to have minimal side effects.
I am aware of the fact that zoom does not validate. I consider validation to be a tool, not a religion, and think that you CAN break rules if you understand the circumstances. It will not break other browsers, as treatment of unknown CSS properties is well defined. If it still feels too dirty, hide it in conditional comment.