CODEWITHSUNDEEP
cssfirefoxgoogle-chrome
Somk
Somk

Reputation: 12057

Does Chrome treat css borders differently than Firefox?

I have the below css running on a div and when I print screen and physically measure he widths the width in firefox is 181px plus a 1 px border on the left and 1px on the right. But when I view it in Chrome the width is 179px and the borders are 1px on the left and 1px on the right. As if they have eaten into the width of the box. Can anyone shed some light on this?

.tab{
    background:#fff;
    border-left:1px #000 solid;
    border-right:1px #000 solid;
    height:111px;
    width:181px;
}

Upvotes: 2

Views: 508

Answers (1)

kmatheny
kmatheny

Reputation: 4222

Different browsers treat boders differently, try adding this to your .tab class:

.tab {
    ...
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

See http://paulirish.com/2012/box-sizing-border-box-ftw/ and/or http://css-tricks.com/box-sizing/

Alternatively, you could do the following to fix this "issue" for all elements:

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }

Upvotes: 3

Related Questions