1

I played with text inputs and found an interesting thing — it seems like Firefox (40, OS X) doesn't react on changing line-height when height is set, unlike other browsers (for example, Chrome). Why?

Chrome:
Chrome

Firefox:
Firefox

JSFiddle

input {
    font-size: 20px;
    line-height: 30px;
    height: 20px;
}
<input type="text" value="222222222222222222"/>

P.S. My question isn't a duplicate of this. That question is about the old issue with line-height: normal !important in default Firefox styles, which is fixed now. In my case styles is applied well, but seems like don't work: Styles

Community
  • 1
  • 1
sergdenisov
  • 8,327
  • 9
  • 48
  • 63
  • 1
    Well the question would be, what effect would you expect to happen when you change the spacing between lines of text on an element that can only ever have a single line of text? – Robert McKee Sep 14 '15 at 21:18
  • @showdev it's not a duplicate, I've just explained it in the **P.S.** part of the question. – sergdenisov Sep 14 '15 at 21:21
  • @RobertMcKee I tried to vertically align text in an input for all supported browsers. The example in my question is only for show that `line-height` isn't working in a case like this in Firefox. – sergdenisov Sep 14 '15 at 21:32
  • Looks like it is vertically centered just fine in firefox. – Robert McKee Sep 14 '15 at 21:34
  • 2
    @SergeyDenisov Fair enough. I did not see that behavior had been changed. However, I do see in the documentation for [line-height at MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) that "[o]n replaced inline elements such as buttons or other input element, line-height has no effect." And also: "Neither Webkit nor Trident implement the correct behavior with replaced inline elements like buttons. In some cases line-height is allowed to have an effect on them. This is incorrect behavior relative to the specification." – showdev Sep 14 '15 at 21:41
  • 1
    @showdev it's really interesting, thanks, I read some information about *replaced/non-replaced* elements. But now I don't understand why in reality in Firefox on *replaced* inline elements such as ` – sergdenisov Sep 14 '15 at 22:43
  • @RobertMcKee in this case yes, but in my real case — not always. – sergdenisov Sep 14 '15 at 23:02
  • 1
    The problem is that form elements, which used to be implemented as true replaced elements (i.e. rendering was delegated to O/S widgets), aren't really replaced elements any more. But they, in many ways, need to behave in a backward compatible fashion, so inhabit a twilight world or not completely replaced, not completely non-replaced elements. As a result, different browsers draw the line in different places. Chrome has a long history of being of favouring the non-replaced side, Firefox favouring the replaced side, and this seems borne out again in this instance. – Alohci Sep 15 '15 at 00:26
  • @Alohci thanks for explanation! Could you post it as an answer? Please, add some articles about concrete realizations in Chrome/Firefox/IE. I'd appreciate and accept it. – sergdenisov Sep 15 '15 at 09:03

0 Answers0