6

を使用して小さな2ペインレイアウトを実行していdisplay:tableます。間隔（これも背景画像から）には、を使用しますpadding。私は子供たちがwidth:50%利用可能なスペースから正確に持っている必要があるので（親のパディングを考慮してdiv）、私はを使用しますbox-sizing:border-box。

これはOperaでは正常に機能しますが、Chromeではbox-sizing:border-boxまた-webkit-box-sizing:border-boxはは黙って無視されます。

問題を示すデモを作成しました。2つの赤いボックスは正方形で、青いボックスは幅と高さが200pxである必要があります：http：//jsfiddle.net/fabb/JKECK/

これがhtmlソースです：

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

そしてcss：

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

これはChromeのバグですか？それとも私は何か間違ったことをしていますか？

4

2 に答える 2

5

はい、Google Chromeのバグ：

問題＃103543-CSS表示：テーブルのバグ

一部のケースは、パディングの特定の側を追加/削除することで解決される場合がありますが（バグレポートのjsfiddleなど）、ケースが不可能な場合があります。

幅と高さがわかっていて正方形のセルが必要な場合は、フロートを使用する方が簡単で安定しています。

注：widthテーブルレイアウトには割り当てられたcss / を壊す機能があるため、heightテーブルのような構造であるか、コンテンツでコンテナーを拡張する場合を除いて、使用しない方がよいでしょう。つまり、!importantin width＆heightは機能しません。

于 2012-01-04T17:06:55.313 に答える
0

Chromeブラウザの-webkit-を削除します。

于 2013-08-21T11:06:51.720 に答える