Pourquoi « display: inline-block » ne fonctionne-t-il pas dans Internet Explorer 7 et comment puis-je y remédier ?

Affichage IE7 : Incompétence des blocs en ligne

Affichage rencontré : problèmes de blocage en ligne dans Internet Explorer 7 ? Vous n'êtes pas seul. Bien que cette propriété fonctionne parfaitement dans Firefox, IE7 semble ignorer son existence.

Le problème :

Avec le HTML et le CSS fournis :

<div class="frame-header">
    <h2>...</h2>
</div>

.frame-header {
    height: 25px;
    display: inline-block;
}

L'élément "frame-header" dans IE7 refuse de se comporter comme un bloc en ligne, entravant la mise en page souhaitée sortie.

La solution :

Pour résoudre cette bizarrerie d'IE7, utilisez l'affichage suivant : inline-block hack :

display: inline-block;
*display: inline;
zoom: 1;

Explication :

IE7 présente une prise en charge limitée du bloc en ligne, le reconnaissant uniquement dans les blocs naturellement en ligne. éléments. Pour les éléments en dehors de cette catégorie, comme "frame-header" dans notre exemple, le hack intervient :

• *display: inline; force le comportement en ligne spécifiquement pour IE7 et versions antérieures.
• zoom : 1; déclenche hasLayout, une propriété cruciale pour le bloc en ligne comportement.

Considérations :

Ce CSS ne répond pas aux normes de validation et peut potentiellement perturber d'autres styles. Par conséquent, envisagez d'utiliser une feuille de style uniquement IE7 implémentée via des commentaires conditionnels :

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

En incorporant cette feuille de style ciblée, vous pouvez résoudre le problème d'affichage IE7 : blocage en ligne sans compromettre l'intégrité CSS globale.

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!