HACK CSS extraordinaire pour l'échange FF/IE6/IE7_Experience

Il s'agit d'un article sur CSS HACK. Le CSS HACK mentionné dans cet article est un HACK pour les attributs de classe et d'identifiant, et l'ordre de disposition a des exigences. Ce dont je veux vous parler aujourd'hui, c'est CSS HACK pour la classe et l'identifiant.                     

Copier le code Le code est le suivant :

.test{/*FF */
hauteur:20px;
couleur de fond : orange ;
}
*+html .test{/*IE7*/
hauteur:20px;
couleur de fond : bleu ;
}
*html .test{/*IE6*/
hauteur:20px;
couleur d'arrière-plan : noir ;
}

Vous pouvez voir à partir du code CSS ci-dessus que FF est toujours le navigateur le plus obéissant. Si vous souhaitez utiliser HACK dans IE6 et IE7, vous devez ajouter la balise html devant. C'est facile à retenir ici. IE6 ajoute *html et IE7 ajoute *+html, ce qui implique qu'une version a été ajoutée. L'avantage du CSS HACK effectué sur la classe et l'identifiant est qu'il n'est pas nécessaire de prendre en compte l'ordre, et il est facile à accepter pour la direction et les autres membres du personnel. Il peut également obtenir un contrôle de version similaire du navigateur JS via ce HACK. L’inconvénient est peut-être que cela génère beaucoup de code ! D'accord, parlons-en d'abord.​

Après avoir lu le contenu ci-dessus, vous pouvez cliquer sur l'effet ci-dessous pour voir l'effet dans différents navigateurs. Orange représente FF, le bleu représente IE7 et le noir représente IE6.​

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Script Home www.jb51.net Hack CSS</title> <style type="text/css"> *{ margin:0; padding:0; } .test{/*FF*/ height:20px; background-color:orange; } *+html .test{/*IE7*/ height:20px; background-color:blue; } *html .test{/*IE6*/ height:20px; background-color:black; } </style> <div class="test"></div>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]