Comment puis-je faire fonctionner correctement « display : inline-block » dans Internet Explorer 6 et 7 ?

Dilemme du blocage en ligne dans Internet Explorer 6 et 7

Malgré sa large acceptation, le blocage en ligne ne fonctionne pas bien avec Internet Explorer 6 et 7. Cette bizarrerie peut entraver vos efforts pour utiliser efficacement le bloc en ligne pour les mises en page.

La raison de ce comportement réside dans le fait que, dans IE6/IE7, inline-block ne fonctionne correctement que sur les éléments intrinsèquement en ligne, tels que les spans. Pour étendre sa portée à des éléments tels que les divs, une solution de contournement est nécessaire.

Surmonter le défi

Pour faire fonctionner le bloc en ligne avec les divs et d'autres éléments de niveau bloc dans IE6/IE7, utilisez l'extrait CSS suivant :

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

Décomposer le Solution

1. display: inline-block: Déclare le comportement de blocage en ligne.
2. *display: inline: A " hack CSS sécurisé qui cible IE7 et versions antérieures, forçant un comportement en ligne.
3. zoom : 1 : Fournit une « mise en page » pour les éléments au niveau du bloc, ce qui est crucial pour le fonctionnement du bloc en ligne dans IE6/IE7.

Informations supplémentaires

Bien qu'il soit possible d'obtenir un CSS valide en appliquant cette solution de contournement, ce n'est pas pratique, surtout si des propriétés préfixées par le fournisseur sont utilisées. ailleurs.

Pour une compréhension plus complète de display: inline-block, reportez-vous aux ressources pertinentes, à l'exclusion de -moz-inline-stack, qui s'applique uniquement à Firefox 2.

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!