CSS でページテキストを非表示にするいくつかの方法の簡単な分析-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-08 14:37:44

オリジナル

1890 人が閲覧しました

方法 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:left;letter-spacing+first-letter のマージンは負の値にする必要があり、

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

値のサイズには実際には固定値はありません。一般に、letter-spacing の絶対値は 2em よりも大きくすることができ、デモでは最初の文字マージンは -20em よりも大きくすることができます。

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

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

ログイン後にコピー

4. これをパブリックスタイルに配置して、個別に

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

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

ログイン後にコピー

を呼び出すことができます。

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