Une brève analyse de plusieurs façons de masquer le texte d'une page en CSS

Méthode 1 : text-indent:-9999px

Pas grand chose à dire, l'ext-indent négatif est la méthode la plus couramment utilisée, mais il y a trois problèmes :
1. Les grandes valeurs négatives entraînent des problèmes de performances, tels que -9999em pour le bouton de soumission Sina/Tencent Weibo, qui mesure environ 120 000 à 160 000 pixels de large, par rapport à 100 largeurs de moniteur, sur un pad Android bas de gamme, en particulier lorsqu'il contient des effets d'animation, il se fige directement
2. Il y a un cadre virtuel sous le navigateur FireFox. En fait, le problème n'est pas grave, overflow:hidden peut être réparé;
3 Il ne peut pas être appliqué aux éléments horizontaux pseudo-inline-block IE6/IE7, sinon les éléments seront enlevés par text-indent.
Même si quelqu'un met en avant :

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

En plus de l'amélioration des performances, les deux derniers problèmes existent toujours.

Méthode 2 : font-size:0
Dans cette méthode, si la hauteur ou la hauteur de ligne n'est pas définie pour le conteneur, si font-size:0 est défini, le le conteneur n'aura pas de hauteur

Méthode 3 : définir le rembourrage et ouvrir le conteneur

<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>

Méthode 4 : lettre-. espacement première lettre
1. Cette méthode est compatible avec IE6, adaptée aux éléments horizontaux de bloc en ligne et aux éléments de bouton. Cependant, elle doit être écrite de la manière suivante

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

.

mais pas Cela ressemble à ceci :

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

2. Cette méthode est affectée par l'attribut text-align.
text-align:left;letter-spacing la marge de la première lettre doit utiliser des valeurs négatives,
text-align:right;letter-spacing la marge de la première lettre doit utiliser des valeurs positives.
La taille de la valeur n'est en fait pas fixe. Généralement, la valeur absolue de l'espacement des lettres peut être supérieure à 2em, et la marge du premier caractère peut être plus grande dans la démo, elle est de -20em
3. N'utilisez pas de virgules pour séparer plusieurs : pseudo de la première lettre. -éléments. Il semble qu'ils seront tous invalides. Ils doivent être écrits séparément. Lorsque vous utilisez des virgules pour séparer, il doit y avoir un espace avant la virgule. Sinon, le navigateur IE6 ignorera cette déclaration :

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

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

4. Elle peut être placée dans un style public et appelée séparément

.notext {   
    text-align: left;   
    letter-spacing: -3em;   
    overflow: hidden;   
}   
.notext:first-letter {   
    margin-left: -20em;   
}

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!