11

レイアウトの作業では、主要な列のフロート ベースのレイアウトと、サブ要素のテーブル ベースのレイアウトを組み合わせてみることにしました。したがって、私の html/css マークアップは次の行に沿っていました。

HTML:

<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
<div class="column">
    <div class="sub-element"></div>
    <div class="sub-element"></div>
</div>
...

CSS:

.column {
    float: left;
    display: table;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element {
    display: table-cell;
    /*  ...  */
}

特定の幅とマージンは重要ではありません。参照例については、この jsFiddleを参照してください。

私が見たのは、ページを左から右に横切る各列ブロックの余白が、最後のものよりわずかに小さいことでした。これを実現するための追加のマークアップや CSS が存在しなかったので、私は混乱しました。さまざまな値をいじってみたところ、コメントアウトするdisplay: tableと、列幅が一定になるなど、期待していた通常の動作が発生することがわかりました。

これで、別の方法を使用して必要なレイアウトを取得できますが、それは問題ではありません。しかし、なぜこれが起こっているのか、私は本当に興味があります。何かご意見は？

編集

これは Webkit のバグのようです。display: tablefloat と margins を使用すると、Firefox で問題なく動作します。後世のための webkit の修正に関する提案はありますか?

さらに編集

Safariでテストしたところ、そこでも動作するようです。なんだクロム??

最終編集

(標準の Chrome に加えて) Firefox 18、Safari、および Chrome Canary でテストした結果、これは実際には Chrome 固有のバグであることがわかりました。

最も簡単な修正方法は、フロートされている各要素内に単純なラッパー div を追加してコンテンツを格納し、ラッパーの CSS を に設定してから、フロートされている外側の要素からwidth: 100%; height:100%; display: table;を削除することです。display: table魅力のように機能します。

http://jsfiddle.net/XMXuc/8/

HTML:

<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
<div class="column">
    <div class="sub-element-wrapper">
        <div class="sub-element"></div>
        <div class="sub-element"></div>
    </div>
</div>
...

CSS:

.column {
    float: left;
    width: 15%;
    margin: 2%;
    /*  ...  */
}
.sub-element-wrapper {
    width: 100%;
    height: 100%;
    display: table;
}
.sub-element {
    display: table-cell;
    /*  ...  */
}
4

1 に答える 1

7

これは起こらないはずです。CSS2.1 仕様のセクション 10.3.3で説明されているように、どのテーブル レイアウト アルゴリズムが使用されているかに関係なく、ブロック レベルのテーブルの水平マージンは、他のブロック レベルの非置換要素と同じ方法で計算する必要があります。特に、余白のパーセンテージ値は、テーブルとして表示している要素を含むブロックの幅に基づいて計算する必要があります。すべての要素は、同じ親と同じマージン パーセンテージ値を共有する兄弟であるため、フローティング ブロック ボックスである限り、それらは等距離である必要があります。

Google Chrome を除くすべてのブラウザーで、要素は予想どおり等距離です。したがって、これは別の Chrome バグであると推測できます。

宣言をコメント アウトするdisplay: tableと (これにより動作が通常に戻ります)、ブラウザはフロート内に匿名のブロック テーブル ボックスを生成し、テーブル セルを格納します。これがレイアウトに悪影響を与えることはありませんが、そうであれば、CSS に関してテーブル レイアウトがどのように機能するかについて詳しくないため、これ以上コメントすることはできません。

于 2013-02-18T18:51:12.213 に答える