2012-11-13 13 views
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; 
} 

私は私のSafari 6.02いるが希望のように、これはヘッダに960ピクセル幅の合計幅を与えているChromeとFirefoxの両方の上とでCSSコードを使用していますプレフィックスを必要とせずに「ボックスサイズ」をサポートするだけですが、いずれにせよフォールバックとして1つ入れます。コンテンツボックスにサイズが設定されていることを意味する980ピクセルの合計幅を取得しています。誰も私のために働いていない理由を教えてもらえますか?CSS3ボックスのサイズ変更Safariで表示を使用しているときに動作していない:テーブル

+1

doctype宣言は何ですか? – Shmiddty

+1

<!DOCTYPE HTML> HTMLページの宣言? –

答えて

8

headerには display: tableが使用されています。これはいくつかの追加パディングを引き起こすようです。 border-collapse: collapseはそれを修正するようです追加: http://jsfiddle.net/7Yhwb/1/(なし: http://jsfiddle.net/7Yhwb/

編集:私はこれはSafariの6.0.2を使用しているWebKitのバージョン(536)のバグだと思います。 WebKit 536も使用する古いChrome 20では、このバグも存在します。

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

問題を解決するには、display: blockに切り替えます。

+0

これは、最初の場所でボーダーパディングを持たないのと同じではありませんが、それは正しい960px幅を作成することに同意したが、必要なパディングとボーダーを犠牲にしているからです... –

+0

@HenryQuekett hups、申し訳ありません。あなたは絶対に正しいです。遅くなってきています...あなたは 'display:table'が必要ですか? 'display:block'に変更すると動作します。 – Jona

+1

私が理解していないのは、それが他のすべてのブラウザで、960pxの幅で表示されているのはなぜでしょうか?display:テーブルに隠れた追加のパディングが追加されています。これはすべてのブラウザで標準であり、なぜそれがサファリで働いていないのかという質問に答えてください... –

関連する問題