Published on: 05 Jul, 2013

IE interpret padding differently compare to chrome and firefox

Tumblr Digg Google Plus

You may wonder why your div style padding is displayed differently in IE and compare to firefox or chrome. This is because when you specify a padding and width in a div, IE will sum up the padding pixel into the width dimension. While the other browsers like chrome or firefox will keep the width dimension as it is.

To overcome this issue, you can just include the following style inside your div. See below css style example:

.box{
    padding:10px 13px;
    width:163px;
    background:#eaeaea;
    box-sizing: border-box; /** IE **/
    -moz-box-sizing: border-box; /* Firefox, Chrome */
    -webkit-box-sizing: border-box; /* Safari */ 
}
Note the box-sizing is only supported from IE 8+

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.