Box Model CSS Hacks

There are problems in box model of html when doc type is not declared in IE (quirks mode), or sometimes we need to override the default box model of a browser. Here is the code:

box-sizing:  border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

When CSS3 box sizing can be:

box-sizing: border-box;
box-sizing: content-box;

For Firefox and Safari / Chrome:

-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;
-webkit-box-sizing: content-box;
-webkit-box-sizing: border-box;
-webkit-box-sizing: padding-box;

P.S. They have also padding-box property to include padding in the overall width or height.

For IE8

-ms-box-sizing: border-box;
-ms-box-sizing: content-box;

One Response to Box Model CSS Hacks

    Leave a Reply

    Your email address will not be published. Required fields are marked *