Bug 13822 – CSS background color not drawn for overflown text in inline blocks

• Status: RESOLVED
• Resolution: INVALID
• Component: CSS

[Sridhar Gurivireddy]

In the example below,

   <span>Here comes an <span style="background: silver; display: inline-block; width: 100px; vertical-align: top; height: 20px;">inline block with overflow.</span></span>

the text overflows to next line and the background color of "silver" applies to overflown text as well.

IE: behaves correctly
Firefox: Does not seem to properly impelemtn width and height for inline-blocks
Webkit: width and height of inline-blocks are implemented, however background color not drawn properly.

Repro: Use this URL http://just1gb.googlepages.com/inline-block-overflow.html

Background color should not apply to overflow.

[Dave Hyatt]

IE and FFX do not support display:inline-block.  Safari does.  Moreover Safari's rendering is correct, since the height of the inline-block has been specified to be 20px.  Background renders into the border box, not the overflow area.

[Dave Hyatt]

Firefox 3 supports inline-block, and if you download, e.g., Gran Paradiso Alpha 4, you can see that it renders just like Safari.