Pourquoi « display : inline-block » se casse-t-il dans IE6 et IE7, et comment puis-je y remédier ?

Problèmes de compatibilité des blocs en ligne dans Internet Explorer 6 et 7

Malgré son utilisation répandue, la propriété CSS "display: inline-block" présente des problèmes de compatibilité connus dans les anciennes versions d'Internet Explorer. Plus précisément, il ne fonctionne pas comme prévu dans IE6 et IE7.

Bizarres d'IE6/IE7 avec Inline-Block

Dans IE6 et IE7, " display: inline-block " ne fonctionne correctement que sur les éléments naturellement alignés, tels que les travées. Son application à des éléments de niveau bloc tels que divs entraîne un comportement inattendu.

Solution de contournement pour IE6/IE7

Pour résoudre ces problèmes dans IE6 et IE7, une solution de contournement spécifique est nécessaire :

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

La pseudo-classe "*display: inline" utilise un hack CSS qui cible uniquement IE7 et plus tôt. La propriété « zoom : 1 » force IE6 et IE7 à reconnaître l'élément comme ayant une « mise en page », ce qui est requis pour que « display : inline-block » fonctionne correctement.

Remarques supplémentaires

Bien que techniquement possible, il n'est pas recommandé d'essayer de conserver cette solution de contournement valide CSS tout en utilisant également les propriétés préfixées par le fournisseur. Pour une compréhension complète de « display: inline-block » et de ses bizarreries de compatibilité, reportez-vous à la ressource liée dans la réponse fournie.

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!