Comment puis-je résoudre le problème « display : inline-block » dans Internet Explorer 7 ?

Gérer l'énigme des blocs en ligne d'Internet Explorer 7

Lorsque vous travaillez avec des mises en page, la compatibilité entre navigateurs présente souvent des défis. L'un de ces problèmes est la propriété display: inline-block, qui, bien que bien prise en charge dans les navigateurs modernes, pose des problèmes dans le domaine d'Internet Explorer 7.

Plus précisément, IE7 présente un comportement bizarre dans son interprétation de la propriété inline. -block pour les éléments non en ligne. Pour surmonter cet obstacle, le hack CSS suivant peut être utilisé :

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

Cette technique trompe efficacement IE7 en lui faisant reconnaître la fonctionnalité de bloc en ligne. Le hack de propriété star (*display: inline;) cible spécifiquement IE7, tandis que zoom: 1; déclenche le comportement hasLayout, améliorant ainsi l'efficacité de l'émulation de bloc en ligne.

Étant donné que le hack invalide la validation CSS et peut potentiellement perturber votre feuille de style, envisagez de l'implémenter dans une feuille de style exclusive à IE7. Les commentaires conditionnels fournissent une solution élégante à cet effet :

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

En utilisant cette approche, vous pouvez résoudre efficacement l'énigme de l'affichage : le bloc en ligne dans IE7, garantissant la compatibilité entre navigateurs pour vos projets 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!