2

When I work on one of my projects I found that the CSS box-sizing property is not automatically inherit in Firefox. Chrome, however, will do the work for you. In my case, it's like:

<form style="box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;"> <input id="input1"></input> <input id="input2"></input> </form>

The box-sizing property is not inherited by the two inputs in firefox.

Am I supposed to add it to the child nodes manually in the future? Is any convention I missed?

Thanks!

Xin Chen
  • 263
  • 2
  • 11
  • not too sure of what you mean, but form elements depends on browsers and OS, and there are things that you cannot restyle , security reason wich is obvious, and the defaut layout with wich the program(browser,) is build, it explains different padding inside inputs from a browser to another for instance. – G-Cyrillus Jun 03 '13 at 21:41

3 Answers3

1

The box-sizing property is not inherited (by default) as you can see from the link - in fact text <input> elements have a computed box-sizing value of content-box (not specifying a type attribute will default to text), like most elements - the exception is buttons and certain replaced elements like <meter>, <textarea>, <progress> etc. all have a computed box-sizing value of border-box

I'm not so sure what makes you think Chrome is inheriting the box-sizing value from its parent. If you look at the computed styles it clearly says box-sizing: content-box;.

http://jsfiddle.net/4ghd6/1/

Adrift
  • 58,167
  • 12
  • 92
  • 90
  • Beat me too it. I will also referenced the [Mozilla Developer Page](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing?redirectlocale=en-US&redirectslug=CSS%2Fbox-sizing). – jmbertucci Jun 03 '13 at 21:49
  • Thanks guys. I was confused by the appearance of elements. These properties are not inherit in all cases. My bad. – Xin Chen Jun 14 '13 at 21:00
0

You could always try

form, form * {box-sizing: border-box;}
Bram Vanroy
  • 27,032
  • 24
  • 137
  • 239
0

I normally add it in my CSS - normally right after the reset.

Look at this Box-sizing

You are missing box-sizing: border-box; -

*{ box-sizing: border-box;

-moz-box-sizing: border-box; -webkit-box-sizing: border-box; } IE Does not require vendor specific CSS -ms-box-sizing: border-box; is not needed

Community
  • 1
  • 1
lloan
  • 1,383
  • 8
  • 23