CSS でページテキストを非表示にするいくつかの方法の簡単な分析

方法 1: text-indent:-9999px

あまり言うことはありませんが、ext-indent の負の値が最も一般的に使用される方法ですが、3 つの問題があります:
1. 大きな負の値。 Sina/Tencent WeChat などのパフォーマンスの問題がある。ブログ送信ボタンは、特にアニメーション効果が含まれる場合、ローエンドの Android パッドの 100 モニターの幅と比較して、約 120,000 ～ 160,000 ピクセルの幅です。 、直接フリーズします
2. FireFox ブラウザー フレーム下の仮想現実。実際、問題は大きくありません。overflow:hidden は修復できます。
3. IE6/IE7 の疑似インラインブロックの水平要素には適用できません。そうでない場合、要素は text-indent によって拉致されます。
誰かが次のように主張したとしても、

{ text-indent: 100%; white-spacing: nowrap; overflow: hidden; }

パフォーマンスの向上に加えて、後者の 2 つの問題は依然として存在します。

方法 2: font-size:0
この方法では、コンテナーの高さまたは行の高さを設定せずに font-size:0 を設定すると、コンテナーには高さがなくなります

方法 3: パディングを設定し、コンテナを開く

<style type="text/css">   
 .btn{height: 22px;width: 55px;overflow: hidden;}   
 .btn_download{display: inline-block;width:55px;height: 22px;padding-top:22px;background:url(btn_download.gif) no-repeat;text-align:center;}   
</style>   
<p class="btn">   
 <a class="btn_download" href="#" title="下载">下载</a>   
</p>

方法 4: 文字間隔 + 最初の文字
1 このメソッドは、IE6 以降と互換性があり、インライン ブロックの水平要素に適しており、ボタン要素に適しています。

<button type="button/submit">按钮</button>

2. このメソッドは text-align 属性の影響を受けます。

text-align:right;letter-spacing+first-letter のマージンは正の値にする必要があります。

3 複数: 最初の文字の擬似要素はカンマを使用せずに区切ります。これらはすべて無効になるようです。区切る場合はカンマの前にスペースを入れる必要があります。それ以外の場合、IE6 ブラウザはこのステートメントを無視します:

<input type="button/submit" value="按钮" />

.btn:first-letter,   
.img:first-letter {   
    margin-left: -20em;   
}   

.btn:first-letter ,    /* 逗号前需有1个空格 */
.img:first-letter {   
    margin-left: -20em;   
}

以上がCSS でページテキストを非表示にするいくつかの方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。