Comment puis-je résoudre le problème de compatibilité « display : inline-block ; » dans IE7 ?

Affichage IE7 : correctif de compatibilité des blocs en ligne

IE7 pose un défi lorsqu'il s'agit d'implémenter l'affichage : bloc en ligne ; propriété. Cet article aborde le problème et propose une solution.

Pour les éléments autres que ceux naturellement en ligne, IE7 nécessite un hack CSS spécifique pour obtenir un comportement de bloc en ligne. Le CSS suivant fera l'affaire :

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

Ce hack comprend trois composants :

• display: inline-block : Il s'agit de la propriété d'affichage ciblée .
• *display : inline : Ce hack de propriété en étoile garantit que l'affichage est défini sur en ligne dans IE7 et versions antérieures.
• zoom : 1 : Cela déclenche le comportement hasLayout, qui est essentiel au bon fonctionnement du bloc en ligne dans IE7.

Notez que ceci CSS peut entraîner des problèmes de validation et des incohérences potentielles de style. Pensez donc à utiliser une feuille de style spécifique à IE7 via des commentaires conditionnels :

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

En implémentant ce hack, vous pouvez surmonter l'affichage : inline-block ; limitation de compatibilité dans IE7 et assurez un rendu cohérent de votre page Web sur différents navigateurs.

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!