IE7-/Win: Background, Border, hasLayout

According to CSS2.1 14.2:

The above means, for example, that:

This is what standards compliant browsers (like Mozilla, Opera, Safari) do. In IE7-/Win the behaviour is affected by the hasLayout property of the element.

The following test cases show this behaviour. A div with a 10px dotted brown border is used. For each case the element is repeated twice: first (at the left) with hasLayout=false, then (at the right) with hasLayout=true. In order to have all the test divs with the same dimensions, and still have the possibility to apply hasLayout only when desired, the dimensions are so obtained: The width is given by an external wrapper. The height is given by an internal div, with fixed height.

The test element without any background:

The (100px × 100px) image used as background-image test:

Case 1: yellow background-color. It extends under the border only when hasLayout=false.

Case 2: background-image no-repeat, position 0 0. When hasLayout=true the starting position is the "padding edge", with hasLayout=false it is the "border edge"

Case 3: both background-color and background-image, no-repeat, position 0 0.

Case 4: background-image, repeat, position 0 0. The image extends under the border only when hasLayout=false.

Case 5: background-image no-repeat, position 10px 10px.

Case 6: background-image no-repeat, position 100% 100%.

Other similar tests background extension and border, with CSS3 properties background-clip and background-origin.

CSS tests home