Maison >interface Web >tutoriel CSS >Pourquoi mes éléments de bloc en ligne ne fonctionnent-ils pas dans Internet Explorer 6 et 7 ?

Pourquoi mes éléments de bloc en ligne ne fonctionnent-ils pas dans Internet Explorer 6 et 7 ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-21 08:11:13187parcourir

Why Aren't My Inline-Block Elements Working in Internet Explorer 6 and 7?

Faire fonctionner les éléments de bloc en ligne dans Internet Explorer 6 et 7

Q : J'utilise des éléments de bloc en ligne dans mon code CSS , mais ils ne fonctionnent pas correctement dans Internet Explorer 6 et 7. Qu'est-ce que je fais tort ?

</p>
<h1>inscription {</h1>
<p>color:#FFF;<br> border-bottom:solid 1px #444;<br> text-transform : majuscule ;<br> text-align:center;<br>}</p>
<h1>signup #left {</h1>
<p>display : inline-block<br>}</p>
<h1>signup #right {</h1>
<p>background-image:url(images/signup.jpg);<br> bordure gauche : solide 1px #000;<br> border-right : solid 1px #000;<br> display : inline-block ; <br> padding:1% 2%<br> width:16%;<br>}</p>
<h1>inscription #right a { font-size:100%; font-weight:bold></h1>
<h1>inscription #right p { font-size:90%; font-weight:bold }</h1>
<h1>inscription a:hover { color:#FFF; text-decoration:underline }</h1>
<p>

A : Dans Internet Explorer 6 et 7, inline-block ne fonctionne que sur les éléments naturellement en ligne comme les spans. Pour le faire fonctionner sur d'autres éléments comme les divs, vous avez besoin des éléments suivants :

</p>
<h1>yourElement {</h1>
<pre class="brush:php;toolbar:false">display: inline-block;
*display: inline;
zoom: 1;

}

  • *display : inline est un hack CSS spécifique à IE7 et ci-dessous.
  • zoom : 1 garantit que l'élément a une mise en page, ce qui est une condition préalable au fonctionnement du bloc en ligne.

Bien qu'il soit possible d'implémenter cette solution de contournement avec un CSS valide, il est non recommandé, surtout si vous utilisez déjà des propriétés préfixées par le fournisseur. Pour plus d'informations sur le bloc en ligne, reportez-vous à cette ressource.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn