Chrome対ボックスサイズ：ディスプレイの境界ボックス：

Question

display:tableを使用して2ペインの小さなレイアウトを作成しています。スペーシング（背景画像からも）の場合は、paddingを使用します。利用可能なスペースから子供が正確にwidth:50%を持つようにする必要があるので（divのパディングを考慮して）、私はbox-sizing:border-boxを使用します。

これはOperaでうまくいきますが、Chromeではbox-sizing:border-box、さらには-webkit-box-sizing:border-boxも暗黙のうちに無視されます。

私はこの問題を示すデモを作成しました。 2つの赤いボックスは、正方形である必要があり、青いボックスは、幅と高さが200pxのようになります。

<div id="table"> 
    <div id="left"> 
     Something on the left side 
    </div>  
    <div id="right"> 
     Something on the right side 
    </div> 
</div> 

とCSS：http://jsfiddle.net/fabb/JKECK/

は、ここでHTMLソースです

#table { 
    display: table; 
    /*border-collapse: collapse;*/ 

    width: 200px !important; 
    height: 200px !important; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid blue; 
    padding: 60px 20px; 
} 

#table #left, #table #right { 
    display: table-cell; 

    width: 50%; 
    box-sizing: border-box; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 

    margin: 0; 
    border: 1px solid red; 
    padding: 0; 
} 

は、このAですChromeのバグ？または私は何か間違っているのですか？

Answer 1

はい、グーグルクロームのバグ：

Issue #103543 - CSS display: table bug

いくつかのケースでは（バグレポートでjsfiddleのように）詰め物の特定の側面を取り除く/ adddingによって解決することができるが、あなたの場合はできない場合があります。

幅と高さが分かっていて正方形のセルが必要な場合は、浮動小数点数を使用する方が簡単で安定します。

注： テーブルレイアウトが割り当てられたCSS width/heightを破る能力を持っているので、それはそれは、テーブルのような構造であるか、またはあなたが内容にコンテナを展開しない限り、それを使用しない方が良いです - ので、あなたの!importantでwidth & heightが機能しません。

Answer 2

クロムブラウザの場合は、 - ウェブキットを削除してください。