6 
    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;
}

私は上記のCSSコードを使用しており、ChromeとFirefoxの両方で、ヘッダーに希望どおりの合計幅960pxを与えていますが、Safari 6.02では、プレフィックスを必要とせずに「ボックスサイズ設定」をサポートする必要がありますが、とにかくフォールバックとして、私は980pxの合計幅を取得しています。これは、コンテンツボックスのサイズになっていることを意味します。なぜそれが私のために機能しないのか誰かに教えてもらえますか？

4

1 に答える 1

9

で使用display: tableしていますheader。これにより、いくつかの追加のパディングがトリガーされるようです。追加するborder-collapse: collapseと修正されるようです：http：//jsfiddle.net/7Yhwb/1/（なし： http： //jsfiddle.net/7Yhwb/）

編集：これは、Safari 6.0.2が使用しているWebKitバージョン（536）のバグだと思います。WebKit536も使用する古いChrome20には、バグも存在します。

WebKit 537を使用する最近のChromeバージョンでは、修正されているようです。

あなたの問題を解決するために、私はに切り替えますdisplay: block。

于 2012-11-13T21:14:21.300 に答える