CSS, c'est-à-dire méthode d'écriture compatible

CSS est une partie très importante de la conception Web, mais la compatibilité CSS dans différents navigateurs est un problème très gênant. Surtout dans le navigateur IE, le problème de la compatibilité CSS est plus important. Par conséquent, vous devez faire attention à la compatibilité du navigateur IE lors de l'écriture de styles CSS. Cet article présentera certaines méthodes d'écriture compatibles IE couramment utilisées.

1. Problèmes courants de compatibilité du navigateur IE

Dans le navigateur IE, les problèmes courants de compatibilité CSS sont les suivants :

1. Modèle de boîte : IE6 et IE7 ne prennent pas en charge le modèle de boîte standard, mais adoptent le modèle de boîte IE, ce qui provoque le problème réel. la largeur et la hauteur de l'élément doivent être différentes de la largeur et de la hauteur conçues lors du réglage de la largeur et de la hauteur.
2. Transparence des images PNG24 : IE6 ne prend pas en charge la transparence des images PNG24. Vous devez utiliser JavaScript pour définir la transparence séparément pour IE6.
3. Effacer les flotteurs : IE6 ne prend pas en charge la suppression automatique des flotteurs par le navigateur. Vous devez utiliser clear:both pour effacer les flotteurs manuellement.
4. Positionnement : IE6 ne prend pas en charge position:fixed, vous pouvez utiliser position:absolute pour obtenir le même effet.

2. Méthodes d'écriture compatibles avec le navigateur IE couramment utilisées

1. L'arrière-plan de l'image n'est pas couvert dans le navigateur IE6

Dans IE6, si un élément a à la fois une image d'arrière-plan et un jeu de couleurs d'arrière-plan, l'image d'arrière-plan sera ne sera pas couvert. À ce stade, vous devez ajouter un attribut _filter à l'élément conteneur et définir sa valeur sur « hériter ».

<code>.container{
    background:url(images/bg.png) no-repeat;
    background-color:#fff;
    _filter: inherit;
}</code>

2. La bordure n'est pas couverte dans le navigateur IE6

Dans IE6, lorsque deux éléments de bloc ou deux éléments en ligne se rencontrent, la bordure ne sera pas couverte. À ce stade, vous pouvez résoudre ce problème en définissant un div vide.

<code><div class="box">
    <div class="inner"></div>
</div>

.box{
    background:#fff;
    border:1px solid #ccc;
    position:relative;
    zoom:1;
}
.inner{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}</code>

Le code ci-dessus déclenche le mécanisme hasLayout du navigateur IE en définissant position:relative et zoom:1, et affiche la bordure en définissant un élément div vide.

3. Problème de chevauchement de marge sous le navigateur IE6

Dans IE6, lorsque la marge supérieure et la marge inférieure de deux éléments adjacents se chevauchent, un chevauchement de marge se produit. À ce stade, vous pouvez définir un padding-top pour l'élément ci-dessus afin d'éviter le chevauchement des marges.

<code><div class="parent">
    <div class="children"></div>  
</div>

.parent{
    padding-top:1px;    
}

.children{
    margin-top:10px;
    height:50px;
    background:#ccc;
}</code>

4. Problème de transparence des images PNG24 sous IE6

Afin de prendre en charge la transparence des images PNG24 dans IE6, vous pouvez mettre une couche de div sur l'image et ajouter un morceau de code JavaScript au div.

Code HTML :

<code><div class="png">
    <img src="images/logo_bg.png" />
</div></code>

Code CSS :

<code>div.png{
    position:relative;
    _behavior: expression(
        function( ele ){
            ele.innerHTML = '<span style="display:inline-block;width:' + ele.offsetWidth + 'px;height:' + ele.offsetHeight + 'px;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\''+ ele.getElementsByTagName('img')[0].src + '\',sizingMethod=\'scale\')"></span>';
        }(this)
    );
}</code>

Dans le code ci-dessus, l'attribut _behavior peut lier le code JavaScript à l'élément et l'exécuter à l'intérieur.

5. Implémentation du positionnement fixe sous IE

Dans le navigateur IE, l'attribut position:fixed ne peut pas être pris en charge, mais des effets similaires peuvent être obtenus via JavaScript.

Code JavaScript :

<code>function fixedPosition() {
    var obj = document.getElementById("fixed_obj");
    var top = (document.documentElement.clientHeight - obj.offsetHeight) / 2 + document.documentElement.scrollTop;
    obj.style.top = top + "px";
}

window.onscroll = fixedPosition;

//初始时就调用一次以免刷新后没有滚动事件而没有效果
fixedPosition();</code>

Il convient de noter que s'il est compatible avec les navigateurs IE7 et supérieurs, DOCTYPE doit être défini, sinon IE affichera la page dans un mode étrange et des problèmes de compatibilité peuvent survenir.

Cet article résume certaines méthodes d'écriture compatibles CSS IE couramment utilisées, j'espère qu'il sera utile à tout le monde. Dans les projets réels, nous devrions continuer à résumer et à explorer de meilleures méthodes d'écriture compatibles avec IE pour améliorer la compatibilité et l'expérience utilisateur des pages Web.

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!