CSS Hack Summary Manuel de référence rapide La compatibilité du navigateur doit être connue_Experience Exchange

Bloquer le navigateur IE (c'est-à-dire qu'il ne sera pas affiché dans IE)

Copiez le code Le code est le suivant :

*:lang(zh) select {font:12px !important;} /*FF visible, déclaration spéciale : grâce à la dernière mise à jour d'Opera, cette phrase est désormais devenue un HACK spécial pour FF* /
select:empty {font:12px !important;} /*visible en safari*/
Ici, select est le sélecteur, qui peut être modifié en fonction de la situation. La deuxième phrase est propre au navigateur Safari sur MAC.

Reconnu uniquement par IE7

Copiez le code Le code est le suivant :

*+html {…}
Vous pouvez utiliser ce HACK lorsque vous avez besoin de créer des styles uniquement pour IE7.

Reconnaissance IE6 et inférieure

Copier le code Le code est le suivant :

* html {…}
Portez une attention particulière à cet endroit. De nombreux propriétaires ont écrit qu'il s'agit d'un HACK pour IE6. En fait, IE5.x peut également reconnaître ce HACK. Les autres navigateurs ne le reconnaissent pas.
html/**/>body select {……}
Cette phrase a le même effet que la phrase précédente.

Seul IE6 ne reconnaît pas

Copier le code Le code est le suivant :

select { display /*IE6 ne reconnaît pas*/:none;}
Ici, sépare principalement un attribut et une valeur via des commentaires CSS, qui sont publiés avant les deux points.

Seuls IE6 et IE5 ne sont pas reconnus

Copier le code Le code est le suivant :

select/**/ { display /*IE6, IE5 ne reconnaît pas*/:none;}
La différence ici par rapport à la phrase ci-dessus est qu'il y a un commentaire CSS supplémentaire entre le sélecteur et les accolades.

Seul IE5 ne reconnaît pas

Copier le code Le code est le suivant :

select/*IE5 ne le reconnaît pas*/ { display:none;}
Cette phrase est le commentaire dans la zone d'attribut supprimé de la phrase précédente. Seul IE5 ne reconnaît pas

Solution de modèle de boîte

Copier le code Le code est le suivant :

selct {width:IE5.x width; voice-family :""}""; voice-family:inherit; width:correct width;}
La méthode d'effacement du modèle de boîte est non géré via !important de. Cela doit être clair.

Effacer le flotteur

Copier le code Le code est le suivant :

select :after {content:"."; display:block; height:0; clear:both; Enveloppez l'enfant entier, puis utilisez ce HACK flottant pour définir le parent une fois, ce problème pourra alors être résolu.

Ellipses de troncature

Copier le code Le code est le suivant :

select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
Cela coupera automatiquement le texte en excès après avoir dépassé la longueur et se terminera par un les points de suspension sont une bonne technique. C'est juste que Firefox ne le prend pas en charge actuellement.

Seul Opera reconnaît

Copiez le code Le code est le suivant :

@media all and (min-width : 0px){ select {……} }
Définissez des paramètres séparés pour le navigateur Opera. Ci-dessus sont quelques HACK dans l'écriture de CSS. Ceux-ci sont utilisés pour résoudre les problèmes de compatibilité locale. Si vous souhaitez séparer le contenu de compatibilité, vous pouvez également essayer les filtres suivants. Certains de ces filtres sont écrits en CSS pour importer des styles spéciaux via des filtres, et d'autres sont écrits en HTML pour lier ou importer les styles de correctifs requis via des conditions.


IE5.x용 필터, IE5.x만 보입니다

코드 복사 코드는 다음과 같습니다

@media tty {
i{content:"";/*" "*/}} @import 'ie5win.css' /*";}
}/* */

IE5/MAC 필터는 일반적으로 필요하지 않습니다

코드 복사 코드는 다음과 같습니다.

/**//*/
@import "ie5mac.css"
/**/

IE의 if 조건 해킹

코드 복사 코드는 다음과 같습니다.

모든 IE가 이를 인식할 수 있습니다
>IE5.0만 인식 가능

IE5.0 또는 IE5.5만 가능 인식됨
IE 6에서만 인식됨-
IE6에서만 인식됨

IE6 이하의 IE6 및 IE5.x에서 인식 가능

위의 내용은 IE7에서만 인식할 수 있으며 이는 포괄적이지 않을 수 있습니다. 편의를 위해 이러한 기술을 요약해 주시기 바랍니다. 향후 작업 문의를 위해 동시에 이러한 HACK
을 개발한 작성자에게 감사드립니다.