Comment cibler spécifiquement IE7 et IE8 avec un CSS conforme ?-tutoriel CSS-php.cn

Comment cibler spécifiquement IE7 et IE8 avec un CSS conforme ?

Susan Sarandon

Libérer： 2024-10-29 21:00:03

original

742 Les gens l'ont consulté

How to Specifically Target IE7 and IE8 with Compliant CSS?

Comment cibler spécifiquement IE7 et IE8 avec un CSS conforme

Réaliser un ciblage CSS spécifique au navigateur peut être difficile, en particulier lorsqu'il s'agit d'anciennes versions comme IE7 et IE8. Voici deux approches :

Ciblage explicite sans piratage à l'aide de HTML et CSS

Cette méthode repose sur la création de classes spécifiques au navigateur pour le élément. Par exemple :

<code class="html"><!--[if IE]>
<![endif]-->
<!--[if lt IE 7 ]><html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]--></code>

Copier après la connexion

Au sein de votre CSS, vous pouvez ensuite cibler précisément des versions spécifiques d'IE :

<code class="css">.ie6 body { border:1px solid red; }
.ie7 body { border:1px solid blue; }</code>

Copier après la connexion

Cibler les versions d'IE avec des "Hacks" CSS

Pour les "hacks" CSS, les règles suivantes s'appliquent :

Utilisez "9" pour cibler IE8 et versions antérieures.
Utilisez "*" pour cibler IE7 et versions antérieures.
Utilisez "_" pour cibler IE6.

Exemple :

<code class="css">body {
  border: 1px solid red; /* Standard */
  border: 1px solid blue; /* IE8 and below */
  *border: 1px solid orange; /* IE7 and below */
  _border: 1px solid blue; /* IE6 */
}</code>

Copier après la connexion

Ciblage d'IE10

Pour IE10 , qui ne reconnaît pas les instructions conditionnelles, utilisez le code suivant :

<code class="html"><!doctype html>
<html lang="en">
<!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
  <head></head>
  <body></body>
</html></code>

Copier après la connexion

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!