CSS3 box-sizing in Safari not working when using display: table

Question

    header {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    padding:10px;
    width: 960px;
    margin: 0 auto 0 auto;
    height:80px;
    display:table;
    background-color:#FFF;
}

I am using the CSS code above and in both Chrome and Firefox this is giving the header a total width of 960px like desired however in my Safari 6.02 which should just support "box-sizing" without the need for a prefix but I put one in as a fallback anyway I am getting a total width of 980px which means it is sized upon the content-box. Could anyone tell me why its not working for me ?

Answer 1

You are using display: table on your header. This seems to trigger some additional paddings. Adding border-collapse: collapse seems to fix it: http://jsfiddle.net/7Yhwb/1/ (without: http://jsfiddle.net/7Yhwb/)

Edit: I think this is a bug in the WebKit version (536) Safari 6.0.2 is using. In an old Chrome 20, which uses also WebKit 536, the bug is also present.

In the more recent Chrome versions which use WebKit 537 it seems to be fixed.

To fix your problem I would switch to display: block.