2012-04-08 8 views
1

div32のコンテンツに を追加する単純なCSS3ハックがあり、テキストが含まれているかどうかにかかわらず、高さが崩れないようにしています。私はもう一度それを見つけることができません。CSS3のプロパティがありません。それはなんですか?

誰か助けてもらえますか?

<div>&nbsp;</div> <!-- still nothing in it but with &nbsp; appended it won't collapse -->

<div></div> <!-- nothing in it = will collapse -->

<div>SOME CONTENT&nbsp;</div> <!-- "SOME CONTENT" is added via JS; -->

+1

私はあなたが 'のような何かを探していると信じてdiv:after {content: ""} 'しかし、Kolinkの答えははるかに良く互換性のある解決策です。 – animuson

答えて

3

あなたは:after:before疑似要素とcontentプロパティについて話しているかもしれません。

#someId:after { 
    content: '&nbsp;'; 
} 

なぜ、min-heightを使用しないようにしますか?

編集: コメントで指摘したように、これはテキストとして追加し、その解決策は、エスケープシーケンスとしてUnicode表現を使用することです:

#someId:after { 
    content: '\0000a0'; 
} 
+0

これは実際には文字列 ' 'を末尾に追加します。 CSS付きテキストはHTMLとして処理されないため、HTMLエンティティも処理されません。 – animuson

+2

あなたは正しいですが、それを行う方法を示していますか?エスケープされたユニコードchar: '\ 0000a0'に変更する必要があります。 – rcdmk

+0

フォントサイズは動的に計算され、上方向にずれます。また、あなたのソリューションは、文字列リテラル ' 'を表示します。少なくとも、Operaではそれがそうです。 –

0

CSSは、あなただけのHTMLタグにコンテンツを追加することはできません。それはちょうど間違っています。

しかし、あなたはこれを行うことができます。

min-height: 1em; 

これには、コンテンツが存在しない場合ので崩れない、divは常に少なくとも一つのライン長身であることを保証します。

+2

私は最初の文のためにこれをupvoteに消極的です。 :x – animuson

+0

また、1emは現在のfont-sizeでのmグリフの幅です。行の高さが1emに設定されている場合、「1行の高さ」に等しくなります。そうでない場合は、最小の高さをmの幅に設定するだけです。 – MetalFrog

関連する問題