Maison > Article > interface Web > 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 :
2. Méthodes d'écriture compatibles avec le navigateur IE couramment utilisées
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>
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.
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>
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.
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!