275859 - Inconsistent Handling of Input Element Dimensions

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Robert F.]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20041107 Firefox/1.0

With Mozilla Firefox 1.0, it has come to my attention that the height and width
of button elements are not rendered the same as other elements. Apparently,
buttons are not following the same box model as other elements, because when
placing these elements next to each other, one can planely see that they are
off. When it comes to many pixel perfect designs, or simply laying things out,
this is an issue, and not per the W3C Specifications.

Reproducible: Always

Steps to Reproduce:
1.Create a Form
2.Insert two input elements - A text input and submit button input type
3.Use CSS to give both the same border, padding, margin, width/height
4.View

Actual Results:  
Buttons of all types come up a few pixels short of what they should. 

Expected Results:  
All buttons should be of the specified width/height, the same as the text elements.

Comment 1

[Ray Papworth]

Attachment: input & button with border

The main issue appears to be that for input controls the border is added
outside the specified width, but for buttons it is added inside as shown by the
attachment. I.E. does the same.
http://www.w3.org/TR/2004/CR-css3-ui-20040511/#box-sizing0 may address this.

Comment 2

[Ray Papworth]

Attachment: Very high input and button aligned by text

Another issue is that the controls are arranged so the the text inside is
aligned horizontally so the boxes may go out of line as in the exagerated
example.
http://www.w3.org/TR/REC-CSS2/visuren.html#inline-formatting mentions this sort
of thing. I.E. does it differently.
These look like features rather than bugs.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Comment 1 is correct.  We're using a different box model (-moz-box-sizing:
border-box), because the exact rendering of buttons is undefined per CSS and
this gives us compat with other browsers.

So the behavior is as-designed.