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;
Share:

One Response to Box Model CSS Hacks

  1. Wii Hack says:

    I get pleasure from, result in I discovered exactly what I used to be looking for. You have ended my 4 day lengthy hunt! God Bless you man. Have a nice day. Bye

Leave a Reply

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