css - CSS テキストのインデントが IE7 で機能しない

Question

サンプルページは次のとおりです: http://jsfiddle.net/p9Fbb/

基本的にtext-indent、アイコン上で使用する場合、Internet Explorer 7 (互換モードの IE9) は、テキストだけでなく要素を画面外に移動します。何らかの理由で、これはテーブル セルの特定の状況でのみ発生します (要素がセル内で単独である場合だと思います)。

どうすればこれを修正できますか? または、要素内でテキスト コンテンツを使用し、非表示にする別の方法はありますか?

Answer 1

問題は、テキストインデントの後でスパンが空になる（またはサイズが0になる（わからない） ）ことです。つまり、表示されません。スパンの周りにテキストを配置すると、まだそこにあることがわかります。

例については、このjsFiddleを参照してください。

display:blockの代わりに使用してdisplay:inline-blockください。インライン要素はサイズ宣言（幅/高さ）があまり好きではなく、内容に応じてスペースを空けて、何かの中に表示されるように作られています。