809826 - inline elements with identical content, margin, padding and border have different sizes

Status: RESOLVED DUPLICATE of bug 654225

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

Description

[Dennis Jakobsen]

Attachment: inline-element-sizes-differ.html

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:19.0) Gecko/19.0 Firefox/19.0
Build ID: 20121107045842

Steps to reproduce:

placed 3 inline elements (input, span, button) in a div, css styled them to have the exact same height font, 1px border, 1px margin, 4px padding.


Actual results:

they have varying height and offset


Expected results:

should have rendered perfectly aligned!

Comment 1

[Dennis Jakobsen]

Attachment: browser render comparison with red guidelines

Comment 2

[Dennis Jakobsen]

i tried messing a bit with inherited font sizes and some weird stuff happens..
setting:
body { font-size: 75%; }

firefox line-height calculation is different for input, it's now 16px, other elements are 18px .. chrome has all of them at 18px

Comment 3

[Boris Zbarsky [:bzbarsky]]

The button bit is a duplicate of bug 654225, fundamentally.

The text input bit is a consequence of us not allowing changes to the line-height of text inputs.  See bug 349259 for the discussion and attempts to change the behavior (which failed due to web compat constraints).

Picking one of the two semi-arbitrarily...