miao

If the browser width is less than about 900px, in IE7 an unnecessary horizontal scrollbar shows up. It seems caused by the presence of content going outside an hasLayout and shrink-to-fit container which is somewhat positioned to the right.

In this test case the content is a blue div with margin-left:-1px, which pulls it outside its container. The container is a widthless right float (green top border). This is contained in a red top bordered box.

The same problem occurs with other shrink-to-fit containers, e.g. when the blue div is a widthless absolutely positioned box. Even when it is an inline hasLayout box, with text-align:right on the parent, and the content is italic text (which goes "ouside" its container). See also this similar test case IE7: unnecessary horizontal scrollbar caused by italics.

CSS tests home