3

空の DIV の使用 (つまり ) に関するアドバイスが何年にもわたって変化しているように見えるのを見て、DIV に内部 HTML がない場合<DIV CLASS="somediv"></DIV>に使用するかどうかについての現在の考えについて混乱しています。&nbsp;

内部 HTML がない場合に、最新のすべてのブラウザに依存して、指定された幅と高さで背景色と画像を正しく表示できるかどうかについての決定的な確認を見つけることができないため、おそらく信頼できないと考えています-まだそれは一見基本的な領域のようです。

空の DIV を使用してはならないという提案も見たことがありますが、空の DIV を使用するのは「間違っている」と仕様書に記載されているのでしょうか、それとも単に信頼性が低いのでしょうか? (私はそれらへの参照を見つけようとしましたが、間違った用語を使用している可能性があります)。

説明のために、推奨される代替手段がない場合に通常空の DIV を使用する 5 つの領域を次に示します。

  1. その後 XHR 呼び出しによって取得されるコンテンツのプレースホルダーとして
  2. レイアウトにスペースを手動で作成する方法として
  3. 画像が CSS で定義されている場合 (背景画像として、しかし実質的に前景になります)
  4. を使用して CSS からテキストが取得される場所.somediv:after{content:SOMETEXT}
  5. CSS は無地の背景色を使用してグラフ バーなどを表示するために使用されます。

おそらく、これらのそれぞれに異なる答えがあり、それがこの問題の複雑さを説明しているのかもしれません.

もちろん、私はすでに発見を試みましたが、たとえば SO の質問は空の <div> を表示する必要がありますか? この領域には、「私見」、「おそらく」、「機能しているように見える」ものが大量にあることを私に示唆しています。これまでに、ベスト プラクティスについて何らかの公式のコンセンサスが得られていることを期待しています。

だから..使用する必要が&nbsp;あり、もしそうなら、フォントサイズをDIV幅/高さの小さい方と同じに設定して、すべてのブラウザーでスペースが確実に満たされるようにする必要がありますか? これがすべてのブラウザーで確実に機能するようにするための他の CSS トリックはありますか?

4

2 に答える 2

4

ブラウザーは、コンテナーに (まだ) コンテンツがないという理由だけで、コンテナーを破棄したり、忘れたりすることはありません。

コンテナーに特定のプレースホルダー形状を持たせたい場合は、 、 、および を指定して、それがmin-heightでmin-widthあるheightことwidthを確認しdisplay: block;ます。

それでもわからない場合は、spacer.gif/pngパディングとマージンなしで埋めることができます。

http://jsfiddle.net/APxNF/1/

于 2013-06-28T11:15:41.443 に答える
3

簡潔な答え。はい、ブラウザはコンテンツがなくても div をレンダリングします。

長い答えですが、今では常にそうかもしれません。私は Web で 8 年間働いており、これらを使用する必要はありませんでしたが、とにかくここにあります。

jsFiddle デモ

HTML

<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>

CSS

.empty1 {
    background: #FBB829;
    height: 100px;
    width: 100px;
}

.empty2:before {
    content: "\00a0";
}
.empty2 {
    background: #FF0066;
    height: 100px;
    width: 100px;
}

.empty3 {
    background: #F02311;
    min-height: 1px;
    height: 100px;
    width: 100px;
}

ソース:

于 2013-06-28T11:14:58.883 に答える