718424 - Gecko adds extra horizonal padding on button element with display:inline-block, outline and text-transform. This padding disappears on focus.

Status: RESOLVED DUPLICATE of bug 385615

(Core :: Layout: Block and Inline, defect)

Description

[Bran van der Meer]

Attachment: poc.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko) Chrome/16.0.912.75 Safari/535.7

Steps to reproduce:

Gecko adds extra horizonal padding on button element. When the element receives focus, for example on tab or on click, this extra padding disappears.

The following HTML:
    <button>button 1 caption</button>
    <button>button 2 caption</button>

With the following CSS:
    button { display: inline-block; }
    button:focus { outline: 1px dotted #666; }
    button:first-letter { text-transform: uppercase; }

See: http://jsfiddle.net/branneman/aQpfv/


Actual results:

On render the element is too wide, it looks like this is due to padding, it shows up in Firebug as a 'width' that is too high. When you focus the element, it switches back to the supposed width.


Expected results:

On render, the element should be smaller.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The width is being computed as if all the text were uppercase.  So this is basically bug 385615.  Marking dependent, just in case the fix there only involves font-size and not other properties affecting glyph sizes.

Comment 2

[Jonathan Kew [:jfkthame]]

I think it's clear the fix in bug 385615 will need to deal with the style properties in general, not only with font-size. Noted this in bug 385615 comment 23, and adjusted summary there; marking this as a duplicate.