Dimensional Bug Fixing

原文地址：http://www.communitymx.com/content/article.cfm?page=2&cid=C37E0

bugs: IE4-IE6/Win

1. Guide

　　A very large percentage of IE/Win bugs are triggered by the lack of any stated dimensions on elements that contain nested floats. In other words, if you have a box without either a width or a height, and nest one or more floats inside, some very weird display bugs may declare themselves. Such bugs can happen without floats, but are far rarer than the float variety.

 

2. solution　

.buggybox {height: 1%;}
#parentElement>.buggybox {height: auto;}

　　Set the small height in the regular selector for the element and then override that height with the auto value in a following selector that uses a child combinator, >, which IE<=6/Win browsers do not recognize.

　　CSS gurus have known for a long time that when IE/Win sees that a box has a stated dimension that is not large enough to enclose the content of that box, the browser will wrongly enlarge the width of the box to accommodate unbreakable lines, such as long URLs. IE/Win will also extend the height of a box so that its content does not overflow the bottom border of the box. Browsers that more closely follow the W3C specifications let the extra content protrude beyond the height or width controlled box.

　　Since other browsers don't have the bug, and more importantly, don't wrongly expand height-defined boxes, this bug-fixing height should be hidden from browsers other than IE/Win. It is not necessary to hide this fix from earlier versions of IE/Win, since even though they don't have the Peekaboo Bug, they do have other dimension based bugs, and they all do the expansion trick. (if height is not auto, it will trigger hasLayout)

　　IE5/Mac doesn't incorrectly expand boxes, so letting that browser see the small height is sure to damage its display. Thus, the height needs to be hidden from it, as well as the other, non-IE browsers.