Probably the single biggest clue that you are dealing with hasLayout issues is content that appears and disappears or a portion of the UI that is out of place.
To debug if and where the problem is, you can begin by adding the following rule to your CSS:
* { zoom: 1; }
If the issue goes away, then you are more than likely dealing with a hasLayout issue. The next step would be to remove the above and systematically add the zoom: 1; to the suspected elements. Once you find the culprit, put the zoom declaration in a separate IE CSS file and use conditional comments to source in that file just for IE.
"Who are the suspects??"
An absolute positioned parent container (a div) shrink-wraps to its child content. This is the expected standard behavior and is the actual behavior for IE 6 & 7 and Firefox. But things change if the child element has layout applied:
Normally we are looking for cases where we actually need to apply hasLayout to correct a problem, but there are cases where the opposite may be true, as in the above example.
High on my list of "run-ins" is the next example. I often have need to position parent or ancestral containers relative in order to position child elements absolute within that container. Problems occur when you might have an ancestor positioned relative that has grandchild element inside a floated parent. I know this sounds odd when stated like this, but with CSS layout, I find it occurs quite often. Here is what it looks like in the "big 3":
Apply hasLayout to the outer container and here is what you have:
One residual effect as you can see is the outer parent container now forms a layout box around its content. This is inconsistent, of course, with the standard (as the internal floated element has not been cleared) but in most instances you would want to clear the floated elements, thus gaining the box around all of the content resulting in the same conditions.
And there you have it. A short series, but this should be enough to help you be on the watch for bugs related to this problem as you develop.
Posts
I ran into an IE quirk yesterday that once again turned out to be this issue.
ReplyDeleteThe set up is a container with varying content across several pages except that at the top of the container content is an H2 header and an image button floated left and right respectively. The floats are cleared for the subsequent content. The visual problem was about double the margin beneath these two floated elements.
First thought? IE float margin bug. Nope. There was nothing curious or obviously incorrect about any other content on any of the pages. The parent container here also has a background image which was present and proper.
I am a bit embarrassed to admit it took my assistant suggesting hasLayout as a possible culprit. Bingo. I applied display: inline-block; (another great method to add hasLayout) and all is well again in IE land...