64715 - background-color on :hover messes up image border

Status: VERIFIED DUPLICATE of bug 61217

(Core :: Layout, defect)

Description

[Braden]

I've been seeing this for a long time, but just recently bothered to narrow it
down. When a background-color has been set for :link:hover, the background color
shows through the lower part of the image border on mouseovers. In the test
case, moving the mouse over the image should have no visual effect.

Comment 1

[Braden]

Attachment: Test case

Comment 2

[Hixie (not reading bugmail)]

Per CSS the background applied to the inline element should cover the content 
area of the inline element, whose size is not affected by its contents. The 
image is baseline aligned and so the bottom of the image does not touch the 
bottom of the content area of the inline element.

        +-------------+          TOP OF INLINE REPLACED CONTENT
        |x x x x x x x|
  ------|-x-x-x-x-x-x-|--------- TOP OF INLINE BOX CONTENT AREA
        |x x x x x x x|
  ______|_x_x_x_x_x_x_|_________ BASELINE
  ______________________________ BOTTOM OF INLINE BOX

The background you are seeing under the image's bottom border is covering the 
area where any descenders would go, if there was any text in the inline element.

However, that doesn't explain why the inline element's background (and borders
if you add any) are going in front of the inline replaced element's borders but
behind the inline replaced element's content.

David?

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Marking dup of the bug that, when fixed, will turn this into just a line below
the image.

*** This bug has been marked as a duplicate of 61217 ***

Comment 4

[Aaron Kaluszka]

v