7

大まかに言えば、4 列のレイアウトを構築しようとすると、次の HTML が得られます。

<div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
    <div>A column</div>
</div>

そして、私はこのCSSを持っています:

div {
    background: #ccc;
}

div div {
    background: #eee;
    display: inline-block;
    width: 25%;
}

->これをいじってください<-

ブラウザーでレンダリングすると (現在、Chrome のみでテストしています)、ネストされた div 要素間の空白 (この例では、空白は改行が原因です) がレンダリングされ、レイアウトが破棄されます。

明らかに、ネストされた div をフロートできます...

div {
    background: #ccc;
}

div div {
    background: #eee;
    width: 25%;
    float: left;
}

->それをいじってください<-

しかし、コンテナ div が折りたたまれてしまい、それを開くために CSS の clearfix ハックや追加の HTML を使用する必要はありません。

または、空白が削除されるように HTML を変更することもできます...

<div><div>A column</div><div>A column</div><div>A column</div><div>A column</div></div>

しかし、それでは作業が難しくなります。タグを壊して読みやすくするという代替案は、どういうわけか私を汚く感じさせます...

<div>
    <div>A column</
    div><div>A column</
    div><div>A column</
    div><div>A column</div>
</div>

リソースを1つまたは2つ見つけました（SOで何も見つかりませんでした）が、どのソリューションもあまり好きではありません.

だから私の質問...クロスブラウザ、w3c準拠、非javascript、ハックフリー、整頓されたHTML、使用中にブラウザでHTML空白がレンダリングされるのを防ぐ防爆方法はありdisplay:inline-blockますか? または、不快な副作用がなく、使用できるインラインブロックの代替手段はありますか?

編集

これが本当に不可能であると仮定すると、最良の解決策は、追加の HTML マークアップと「柔軟な」CSS を必要としないものになります。言い換えれば、ウェブマスターは、レイアウトを壊すことを考慮せずに通常どおり HTML を編集でき、CSS (ハッキングまたはその他の方法で) は、それ自体を修正する必要なく、ウェブマスターの修正に対応します。

私の「回避策」

さて、何かを与えなければならないようです。私の状況では、追加のマークアップを必要としない HTML を使用することがより重要であるため、最善の解決策は、目に見えないように「機能する」CSS ハックで作業することです。解決策は、ネストされた div をフロートし、ハックを追加することです...

div div {
    float: left;
}

div::before,
div::after {
    content: "";
    display: table;
}

div::after {
    clear: both;
}

div {
    *zoom: 1;
}

...これは、私がしばらく使用してきた修正の派生物であり、回避したいと考えていました。この簡潔なバージョンの修正は、このサイトで見つかりました。

これで、マークアップ内のすべての div に、必要かどうかにかかわらず、clearfix ハックが適用されました。これがすべてのdivに適用されることによる悪い副作用があるかどうかはまだわかりません-問題が表面化したときにデバッグして修正することを楽しみにしています;-)

4

4 に答える 4

6

この大きなレイアウトの問題に対して、ほぼすべての可能な解決策を提供してくれました。私の好みの解決策を指摘したいだけです。

親の font-size を 0 に設定し、REM で再度リセットします。

(子 div ではなく) 親 div 内に追加のテキストがなければ、コードとレイアウトに問題はありません。

REM (相対 EM) は、(通常の EM のように) 親要素のフォント サイズに相対的ではなく、ドキュメントのルート要素である要素に相対的htmlです。

HTML:

<div class="parent">
    <div class="child">column 1</div>
    <div class="child">column 2</div>
    <div class="child">column 3</div>
    <div class="child">column 4</div>
</div>

CSS:

html {
    font-size: 1em;
}

.parent {
    font-size: 0;
}

.child {
    display: inline-block;
    font-size: 16px; /* Add pixel-based font-size to support IE8 and below */
    font-size: 1rem; /* Don't use rem along with the font-shorthand to avoid problems in IE9/10 - see note below */
    width: 25%;
}

ブラウザのサポートなし:

  • IE8 以下: ピクセルベースの font-size を追加して機能させます。
  • IE9/10: font-shorthand で動作しません。font-size代わりに使用してください！
  • (オペラミニ & iOS 3.2)
于 2013-06-05T09:42:13.960 に答える
1

display:inline-block を使用しているときに HTML の空白がブラウザでレンダリングされるのを防ぐ方法はありますか?

はい、いくつかの方法があります。「ハックフリー」と「整頓」の基準を実際に満たすものはありませんが、機能します。

  • 要素間に空白がないように、コードを再フォーマット (「縮小」) します。
    これはおそらく、最もハッキングのないクロスブラウザー ソリューションです。ただし、必ずしも整然としているわけではなく、CSS ではなく HTML を調整してレイアウトを修正していることを意味しますが、これは理想的ではありません。しかし、それはうまく機能します。コードを読みやすくしたい場合は、HTML コメントを使用してギャップを維持できますが、DOM に含まれることはありません。

       <div>block 1</div><!--
--><div>block 2</div><!--
--><div>block 3</div>

    まだ理想的ではありませんが、膨大な 1 行のコードよりも読みやすいです。

  • コンテナーの をゼロに設定font-sizeし、ブロックのフル サイズに戻します。
    これは本当にうまくいきます。これは純粋な CSS ソリューションであり、簡単に実行できます。欠点は、相対的なフォント サイズを使用している場合に作業が困難になる可能性があることです (つまり、に戻す設定は問題ありませんが、以前のフォント サイズ 0 がまだ 0 であるため、 に設定すると機能しません) 14px。1em1em

  • 1emギャップを埋めるために負のマージンを設定します。
    これもかなりうまく機能しますが、不正確になる可能性があります。

または、不快な副作用がなく、使用できるインラインブロックの代替手段はありますか?

  • いつもありfloat:leftます。しかし、それにはさまざまな問題があります。を使用している場合inline-block、フロートを使用したくないため、オッズは良好です。

  • position:absolute手動でレイアウトを使用して実行します。

于 2013-06-05T09:29:19.437 に答える