Firefox 4 Ignoring Box-Sizing

Firefox 4 ignoring box-sizing?

Firefox implements -moz-box-sizing with an extra value called padding-box (pretty self-explanatory). I suspect that the reason this property has been in "prefix hell" — if you will — is that the padding-box value, being introduced by Mozilla, was only recently added to the spec with no other implementations, and it may be removed from the spec if other implementations still don't surface by or during CR.

Unfortunately, Firefox 4 still requires the prefix, and has continued to do so for a good number of years:

.inner {
    width: 100%;
    height: 100%;
    background-color: #ff0000;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

That being said, Firefox has finally begun shipping with box-sizing unprefixed as of version 29. I believe the experimental padding-box value is still supported, but it's still at-risk. Then again, the odds that you will need to use padding-box are extremely low, so you probably have nothing to worry about. border-box is all the rage, and unlike padding-box isn't going away anytime soon.

So, in short: if you don't care about anything other than the latest version, you no longer need the prefix. Otherwise, if you already have the prefix, there's no harm keeping it around for a while.

Also see the documentation on MDN.

Why is Firefox ignoring -moz-box-sizing and box-sizing?

A good way to see why Firefox is ignoring your CSS is to use the Firebug addon. With Firebug you can see what part of the CSS is applied to a certain element, in this case the #CenterColumnWrapper.

Firefox padding bottom box-sizing: border-box

You can just add one more div inside the parent element and add the padding-bottom to it. Try this code.

CSS

#foo {
  width: 200px;
  height: 200px;
}

#bar {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: yellow;
}

.inner {
  padding-top: 20px;
  padding-bottom: 50px;
}

HTML

<div id="foo">
  <div id="bar">
    <div class="inner">
      test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div>
  </div>
</div>

Firefox ignores max-height with Flexbox

The problem was an incorrect attempt to inherit max-height values and was solved by GCyrillus by using flex and height properties.

See:

jsfiddle.net/atb5yyez/6
jsfiddle.net/atb5yyez/7

max-width on a div ignored on firefox

Turns out that I had a zoom option activated on "localhost" tab it stayed even after rebooting the PC and updating firefox and wasn't showing anywhere. Hitting CTR+0 solved it. That was a stupid one...

moz-box-sizing rule preventing user from seeing form field input in firefox

Ok, I think I have found the cause:

If you remove this line:

select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    border-radius: 4px 4px 4px 4px;
    color: #555555;
    display: inline-block;
    font-size: 14px;
/*    height: 20px;*/
    line-height: 20px;
    margin-bottom: 10px;
    padding: 4px 6px;
    vertical-align: middle;
}

it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.

See updated fiddle here:

http://jsfiddle.net/AbdiasSoftware/vRF3F/3/

Firefox input ignores height on Arch Linux

The native input border makes the height not available in less than 32px. You have to override the default border of the input to get it working below 32px.

Set the border along with a border-radius to look nice.

input {
  box-sizing: border-box;
  height: 24px;
  line-height: 18px;
  padding: 2px;
  border: 1px solid gray;
  border-radius: 2px;
}

Working Snippet:

const $input0 = $('#input0');alert($input0.height());

input {  box-sizing: border-box;  height: 24px;  line-height: 18px;  padding: 2px;  border: 1px solid gray;  border-radius: 2px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="wrapper">  <input type="text" id='input0'></div>

---

Related Topics