要素からテキストを「削除」するための最も一般的な方法は を使用しtext-indent: -9999px
ていましたが、使用する方が良いと読みました
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
そのため、ブラウザはその 9999px ボックスを作成する必要がありません。しかし、なぜ使えないのfont-size: 0
でしょうか? この方法を使用することの正確な問題は何ですか?
要素からテキストを「削除」するための最も一般的な方法は を使用しtext-indent: -9999px
ていましたが、使用する方が良いと読みました
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
そのため、ブラウザはその 9999px ボックスを作成する必要がありません。しかし、なぜ使えないのfont-size: 0
でしょうか? この方法を使用することの正確な問題は何ですか?
ブラウザーによって処理方法が異なり、バリエーションが多すぎて一覧にできません。いくつかの一般的な問題は、ブラウザがルールのようなものをどう処理すればよいかわからずfont-size:0
、フォント サイズのルールが書かれていないかのようにテキストを表示することです。他の状況では、テキストはまだ表示されているだけで、それほど読めない場合があります。他のブラウザー (mozilla、netscape7) は、必要なことを行い、テキストを表示しません。
テストしなくfont-size:0
ても、マージンとパディングがまだ表示されていると思いますが、どちらの場合もおそらく問題です。
個人的には、試す前rgba
に不透明度を使用して設定することさえあります0.0
font-size:0
それは本当にあなた次第です。私は個人的に text-indent をタイトルとしても使用しているため、ページが CSS ドキュメントをロードしている間、CSS がロードされるまでテキストはプレースホルダーになります。また、「text-indent: -9999px」を実行するたびに、パフォーマンスの変化はまったく見られません。
基本的に、'font-size: 0' または 'text-indent: -9999px' を使用しても特に大きなデメリットはありません。どちらも同じように機能します。