Comment faire en sorte que ie supporte CSS3

Comment faire en sorte que ie prenne en charge CSS3 : 1. Téléchargez "ie-css3.htc" et placez-le dans le répertoire du serveur pour utilisation ; 2. Téléchargez le fichier "css3 PIE.htc", puis mettez le " css3 PIE.htc ; Fichier PIE.htc" Téléchargez dans le répertoire du site Web.

L'environnement d'exploitation de cet article : système Windows 7, ordinateur Dell G3, version HTML5&&CSS3.

Méthode 1 : Utiliser ie-css3.htc

ie-css3.htc est un fichier htc qui permet au navigateur IE de prendre en charge certains attributs CSS3, pas seulement box-shadow, mais aussi Vous pouvez faites en sorte que votre navigateur IE prenne en charge l'attribut de coin arrondi border-radius et l'attribut text shadow text-shadow.

Comment l'utiliser est : téléchargez-le et mettez-le dans le répertoire de votre serveur

Écrivez le code suivant dans votre

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

Méthode 2 : Utiliser le plug-in CSS3 Pie

css3 Pie est un plug-in qui permet au navigateur IE de prendre en charge certains attributs CSS3.

Site officiel : http://css3pie.com/

[Apprentissage recommandé : Tutoriel vidéo CSS]

Utilisation :

Étape 1 : Téléchargez le fichier css3 PIE.htc

Étape 2 : Téléchargez le fichier PIE.htc dans le répertoire de votre site Web Vous pouvez le télécharger dans n'importe quel répertoire, à condition que vous vous souveniez de ce répertoire.

Étape 3 : Créez un fichier html, écrivez un morceau de code CSS3 et introduisez PIE.htc, comme indiqué ci-dessous :

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

Remarque : Le chemin du fichier .htc est relatif au chemin du fichier html, plutôt que par rapport au fichier css.

Quelques problèmes connus :

Cette méthode n'est pas une panacée, et il y a certaines limites et choses auxquelles il faut prêter attention.

1. Problèmes liés au z-index

Ces effets CSS3 sous IE sont implémentés à l'aide de VML. VML dessine l'élément conteneur avec des coins arrondis ou des effets de projection, puis cet élément conteneur. est utilisé comme élément cible. Une fois le nœud frère inséré, si l'élément cible est position:absolute ou position:relative, l'élément css3-container sera défini sur la même valeur z-index dans l'arborescence DOM. le même niveau est toujours couvert plus tard. Le précédent, ce qui permet d'obtenir une couverture et d'éviter la possibilité que d'autres éléments y soient insérés.

Voici donc le problème. Si l'attribut position de l'élément actuel est statique, ce qui est l'attribut par défaut, alors l'attribut z-index est inutile et il n'y a pas de remplacement. Par conséquent, pour le moment, le CSS3 sous le navigateur IE Le rendu ne réussira pas. La solution est également très simple, définissez la position de l'élément cible : relative ou définissez la position de l'élément ancêtre : relative et attribuez une valeur d'index z (ne peut pas être -1).

2. Le problème des chemins équivalents

L'attribut de comportement du navigateur IE est relatif au document HTML, qui est différent des autres attributs CSS et n'est pas relatif au document CSS. Cela rend l'utilisation du fichier pie.htc peu pratique. Si le chemin absolu se trouve dans le répertoire racine, le fichier CSS n'est pas pratique à déplacer ; si le chemin relatif se trouve dans le document HTML, la réutilisation du fichier pie.htc dans différentes pages HTML est considérablement réduite. Dans le même temps, les chemins d’attributs d’URL tels que ceux derrière border-image sont également difficiles à gérer.

3. Le problème des abréviations

Utilisez PIE pour implémenter le rendu CSS3 sous IE (il en va de même pour les autres méthodes, seules les formes abrégées peuvent être utilisées, comme les coins arrondis). set border-top -left-radius signifie coin arrondi supérieur gauche, mais PIE ne prend pas en charge cette méthode d'écriture, cela ne peut être qu'une abréviation honnête.

4. Fournissez le bon type de contenu

Si vous souhaitez que le navigateur IE prenne en charge les fichiers HTC, vous avez besoin d'un en-tête de type de contenu avec les mots "text/x-component", sinon, Le comportement sera ignoré. La grande majorité des serveurs Web fournissent le type de contenu correct, mais certains rencontrent des problèmes.

Si vous constatez que la méthode PIE n'est pas valide sur votre ordinateur, c'est-à-dire que le fichier htc ici fait référence au fichier pie.htc n'est pas valide, vérifiez la configuration de votre serveur, il devra peut-être être mis à jour avec la dernière version. type de contenu. Par exemple, pour Apache, vous pouvez faire ce qui suit dans le fichier .htaccess :

AddType text/x-component .htc

Cependant, pour une raison quelconque, vous ne pouvez pas modifier la configuration du serveur (comme un hôte public ou un serveur fourni par un espace fournisseur de services), vous pouvez utiliser un fichier PHP pour appeler indirectement le fichier HTC. J'ai juste besoin de vous montrer le code de ce fichier PHP et vous saurez ce que cela signifie, comme suit :

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

Ajouter un en-tête Content-type contenant les mots "text/x-component" via le fichier PHP et appelez-le en même temps le fichier pie.htc.

Concernant le fichier php présenté ci-dessus, vous pouvez cliquer ici : pie.php (clic droit – [Cible | Enregistrer le lien sous]), ou vous pouvez directement créer un nouveau fichier php et mettre les deux ci-dessus Copier le ligne de code dedans. Ou il y a ce fichier php dans le dossier wrappers des ressources d'emballage d'origine fournies dans cet article, mais le nom est en majuscules.

Si vous utilisez le fichier php ci-dessus, vous devez mettre pie.php et pie.htc dans le même dossier. En même temps, le comportement en CSS doit être écrit comme suit :

behavior: url(pie.php);

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!