Css – Firefox line-height issue with input fields

cssfirefox

I have realized the problem before but I guess it didn't matter as much then as it did now.

What I discovered is that Firefox has a default line-height value of 1.2 for input fields which can not be changed. At least in OSX, don't have Windows so I can't confirm it there.

I did some experimenting and testing and there's just no way to change the default line-height value of Firefox. All the other browsers (ok, I just tried with Chrome and Safari) obey my value perfectly fine but not Firefox.

Has anyone ever noticed this and if yes, have you found a solution to overcome this?

Best Answer

Unfortunatelly the line-height is set to !important in the Firefox base css ... http://hg.mozilla.org/mozilla-central/rev/b97aef275b5e

Related Solutions

CSS 100% height with padding/margin

I learned how to do these sort of things reading "PRO HTML and CSS Design Patterns". The display:block is the default display value for the div, but I like to make it explicit. The container has to be the right type; position attribute is fixed, relative, or absolute.

.stretchedToMargin {
  display: block;
  position:absolute;
  height:auto;
  bottom:0;
  top:0;
  left:0;
  right:0;
  margin-top:20px;
  margin-bottom:20px;
  margin-right:80px;
  margin-left:80px;
  background-color: green;
}

<div class="stretchedToMargin">
  Hello, world
</div>

Fiddle by Nooshu's comment

Css – Targeting only Firefox with CSS

OK, I've found it. This is probably the cleanest and easiest solution out there and does not rely on JavaScript being turned on.

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1>This should be red in FF</h1>

It's based on yet another Mozilla specific CSS extension. There's a whole list for these CSS extensions right here: Mozilla CSS Extensions.

Best Answer

Related Solutions

CSS 100% height with padding/margin

Css – Targeting only Firefox with CSS

Related Topic