3

CSS を使用して、副作用 (および追加の HTML 要素) なしで余白をクリアフィックスして展開する一般的な良い方法は何ですか?

以下は副作用の原因となります (そしてそれらを回避したいと考えています):

  • 設定overflow: hiddenまたは:ボックスの外に表示したいoverflow: autoクリップ、CSS 変換、およびその他のコンテンツ。box-shadowしたがって、いくつかのケースでは使用できません (ただし、それ以外の場合はうまく機能します)。
  • 設定borderまたはpadding: 明らかな配置/サイズ変更効果。
4

1 に答える 1

5

このclear fix に基づいて、margin uncollapse を追加した clear と collapse の修正:

.group:before, /* :before to uncollapse the top margin */
.group:after{
    display: block;
    clear: both; /* clear fix */
    content: "\a0 "; /*   - just a space doesn't uncollapse margins */
    visibility: hidden; /* make sure not to show anything */
    height: 0;
}
.group{
    zoom: 1; /* solves it all for IE < 8, and doesn't hurt other browsers */
}

デモ: jsFiddle、 netrenderer を使用した IE7 のレンダリング

content: "\a0 ";これは空白以外の文字 ( など)と同等で&nbsp;あり、その代わりに使用されることに注意してください.。これにより、ブロックを選択してコピーしたときに、一部のブラウザー (IE9 など) で発生する余分な文字が表示されなくなります。

このソリューションの欠点は次のとおりです。

  • :beforeと:afterが定義されているため、使用する場合は特に注意が必要です。
  • この修正を適用する新しいセレクターごとに、セレクターを 3 回指定する必要があります。
  • 非常に短く/些細なことではありません。

同様のソリューションがYUI で使用されており、この記事で説明されています(ただし はありません&nbsp;)。

于 2013-02-21T16:26:49.063 に答える