Re: Empty button baseline difference in IE/Firefox and WebKit browsers

Le 2014-12-12 17:34, Bogdan Brinza a écrit :
> Hi,
> 
> Here is yet another interoperability issue we've found during IE
> compatibility investigations, that I would like to clarify with
> working group.
> 
> Consider the following simplified example -
> http://jsfiddle.net/x2vgt1xz/ - it looks to me that IE/Firefox sets
> empty element baseline as if the button had a content inside, while it
> looks like Chrome is treating the empty button as an empty inline
> element.
> 
> We have encountered this on http://www.sportsauthority.com - the site
> tries to fix this for WebKit browsers with a rule offsetting title by
> negative 10 pixels:
> 
> @media screen and (-webkit-min-device-pixel-ratio: 0) {
> #header #utility #sli_search_1 {
>                 position: relative;
>                 top: -10px;
> }
> }

<input style="border: 1px solid blue;" type="text" value="text">
<input style="border: 1px solid red; vertical-align: bottom;" 
type="submit" value="">

fixed the problem too.

My test:

http://www.gtalbot.org/BrowserBugsSection/css21testsuite/baseline-alignment-replaced-inline-block-0xx.html

"
The baseline of an 'inline-block' is the baseline of its last line box 
in the normal flow, unless it has either no in-flow line boxes or if its 
'overflow' property has a computed value other than 'visible', in which 
case the baseline is the bottom margin edge.
"
http://www.w3.org/TR/CSS21/visudet.html#leading

Since there is no inflow line boxes when the submit button has value="", 
then Chrome 39.0.2171.95 vertically aligns the margin bottom with the 
baseline of the text-input button. But as soon as the submit button has 
text, then both buttons are baseline-aligned according to their text.



> Which browsers behaves correctly and per spec in this case?

Hard to say; I'd say Chrome is strictly complying with 10.8.1. On the 
other hand, shouldn't we always assume that a submit button has a text 
label? Why and how is it okay or correct or possible to create a submit 
button without a label?

> Or is this
> one of the areas left to UA that has compatibility constraints for
> some legacy content?

"
CSS 2.1 does not define which properties apply to form controls and 
frames, or how CSS can be used to style them. User agents may apply CSS 
properties to these elements. Authors are recommended to treat such 
support as experimental. A future level of CSS may specify this further.
"
3.2 UA Conformance
http://www.w3.org/TR/CSS21/conform.html

That's why we do not have tests about inputs in CSS2.1 test suite.

Gérard

Received on Saturday, 13 December 2014 01:15:13 UTC