css, c'est-à-dire la méthode d'écriture

CSS est un élément indispensable de notre processus de conception et de développement web. Qu'il s'agisse d'embellir la page, de la mise en page ou d'obtenir des effets dynamiques, le CSS est indissociable. Cependant, différents navigateurs ont différents niveaux de prise en charge du CSS. Le plus courant et le plus connu est que le navigateur IE ne prend pas suffisamment en charge le CSS, ce qui entraîne de mauvais effets d'affichage de nombreuses pages sous le navigateur IE. Par conséquent, nous devons comprendre comment écrire du CSS sous le navigateur IE pour garantir que l'effet de la page Web peut être bien affiché dans chaque navigateur.

1. Raisons pour lesquelles le navigateur IE ne prend pas suffisamment en charge CSS

Le navigateur IE est beaucoup plus lent que les autres navigateurs à implémenter CSS. Les principales raisons sont les suivantes :

1. Modèle de boîte incomplet : les versions précédentes d'IE7 utilisaient une méthode de mise en page appelée modèle de boîte IE, qui était différente du modèle de boîte standard, ce qui entraînait l'affichage du même morceau de code dans différents navigateurs. .

2. L'analyse CSS n'est pas standard : le moteur d'analyse CSS du navigateur IE n'est pas entièrement conforme aux normes du W3C. Certaines propriétés CSS ne sont pas prises en charge par IE et l'utilisation de certains sélecteurs CSS est également restreinte.

3. Conflit entre JS et CSS : le rendu de JavaScript et CSS dans le navigateur IE s'exécute sur le même thread. Lorsque JS est bloqué, CSS ne sera pas rendu à temps, affectant la page. effet d'affichage.

2. Méthodes d'écriture CSS couramment utilisées sous le navigateur IE

Afin d'obtenir le même effet dans le navigateur IE que dans d'autres navigateurs grand public, nous pouvons utiliser la méthode d'écriture CSS suivante :

1. méthode d'écriture de hack

la méthode d'écriture de hack fait référence à l'évaluation de la version spécifique du navigateur à l'aide d'instructions de commentaires conditionnelles, afin d'obtenir différentes implémentations pour styles de navigateurs spécifiques ou moyens techniques pour corriger les bogues du navigateur.

Par exemple :

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

Ce code signifie que la feuille de style ie6.css est chargée uniquement dans le navigateur IE6. De la même manière, différentes versions de navigateur telles que IE7 et IE8 peuvent être jugées à l'aide d'instructions conditionnelles correspondantes, et différents paramètres de style peuvent être définis.

2. attribut zoom

zoom est une propriété CSS utilisée uniquement dans les navigateurs IE pour zoomer et dézoomer sur les éléments de la page Effet.

Par exemple :

div {
    zoom: 1;
}

Ce code signifie agrandir l'élément div. Le facteur de grossissement et l'effet spécifiques peuvent être ajustés en fonction de la situation réelle.

3. filter attribut

filter est une propriété CSS unique du navigateur IE, qui peut obtenir un effet de flou, un effet de niveaux de gris et un effet de transparence des images. attendez.

Par exemple :

#imgBox {
    filter: alpha(opacity=50);
    opacity: 0.5;
}

Ce code signifie définir la transparence de l'élément avec l'identifiant imgBox à 50 %, où alpha représente l'attribut de filtre du navigateur IE et l'opacité est les propriétés CSS3 standard.

4. display:inline-block attribut

display:inline-block attribut a une bonne compatibilité sous d'autres navigateurs, mais dans Il n'est pas pris en charge dans IE6 et IE7 Il peut être résolu en écrivant ce qui suit :

Par exemple :

.block {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

Parmi eux, « *display : inline » signifie uniquement dans les navigateurs IE6 et IE7. prend effet la prochaine fois et atteint la compatibilité.

5. position:relative attribut

position:relative L'effet de position:relative dans les autres navigateurs est fondamentalement le même que celui du navigateur IE, mais dans IE6, les éléments sous l'attribut absolu seront empilés ensemble, ce qui peut être réparé par l'écriture suivante :

Par exemple :

.box {
    position: relative;
    _position: absolute;
    *left: 0;
    *top: 0;
}

où *position : absolue le signifie ne prend effet que dans les navigateurs IE6. Effet de compatibilité obtenu.

3. Résumé

Grâce à l'introduction ci-dessus, nous pouvons voir que la prise en charge du navigateur IE pour CSS n'est pas parfaite, mais grâce à certaines techniques de piratage ou méthodes d'écriture CSS spécifiques, on peut atteindre le même effet que les autres navigateurs. Après avoir compris certaines caractéristiques et problèmes de compatibilité du navigateur IE, nous pouvons mieux concevoir et développer des pages Web et obtenir de meilleurs effets d'affichage.

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!