Pourquoi IE7 interprète-t-il mal la propriété CSS « ​​inline-block » et comment peut-elle être corrigée ?

Interprétation erronée du bloc en ligne par IE7 : guide de dépannage

Internet Explorer 7 (IE7) présente un défi unique en matière d'affichage CSS propriétés. Un tel exemple est son incapacité à interpréter correctement la propriété inline-block.

Le code en question

Considérez le code HTML et CSS suivant :

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

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

Mauvais comportement d'IE7

Pour une raison quelconque, IE7 ne parvient pas à appliquer le style de bloc en ligne, ce qui compromet la mise en page souhaitée.

Le hack d'IE7

Pour surmonter ce problème, un hack CSS personnalisé est requis pour IE7 :

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

Par défaut, IE7 reconnaît le bloc en ligne uniquement pour les éléments intrinsèquement en ligne. Ce hack contourne cette limitation.

• display: inline: Écrase display: inline-block, garantissant la compatibilité avec IE7.
• zoom : 1 : Déclenche le comportement hasLayout, essentiel pour réaliser le blocage en ligne fonctionnalité.
• Star Property Hack : Limite l'application de l'affichage : en ligne avec IE7 et les navigateurs antérieurs.

Feuilles de style conditionnelles

Pour garantir des performances et une validation optimales, il est conseillé d'utiliser des feuilles de style conditionnelles pour cibler IE7 plus précisément :

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

Dans le fichier "ie7.css", vous pouvez inclure le hack CSS personnalisé pour résoudre les problèmes de rendu d'IE7. Cette approche minimise la complexité du code et maintient un niveau de validation plus élevé.

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!