Est-ce que quelqu’un peut m’aider s’il vous plaît à comprendre ce bug? Avec Firefox, cela fonctionne bien, mais pas avec Internet Explorer 7. Il ne semble pas comprendre l’ display: inline-block;
.
html:
...
css:
.frame-header { height:25px; display:inline-block; }
L’ display: inline-block;
IE7 display: inline-block;
hack est comme suit:
display: inline-block; *display: inline; zoom: 1;
Par défaut, IE7 ne prend inline-block
charge que les éléments inline-block
sur inline
éléments naturellement intégrés ( Quirksmode Compatibility Table ), vous n’avez donc besoin que de ce hack pour les autres éléments.
zoom: 1
est là pour déclencher le comportement de hasLayout
, et nous utilisons le hack de propriété star pour définir l’ display
sur inline
uniquement dans IE7 et hasLayout
(les nouveaux navigateurs ne l’appliqueront pas). hasLayout
et inline
ensemble vont déclencher inline-block
comportement de inline-block
en inline-block
dans IE7, donc nous sums heureux.
Ce CSS ne validera pas, et peut rendre votre feuille de style gâchée de toute façon, donc utiliser une feuille de style IE7 uniquement via des commentaires conditionnels pourrait être une bonne idée.
Comme plus personne n’utilise IE6 et 7, je présenterai une solution différente:
Vous n’avez plus besoin d’un hack, car IE8 le supporte tout seul
Pour ceux qui doivent supporter ces navigateurs de l’âge de pierre avant IE8 (ce n’est pas que IE8 est aussi vieux, trop de toux ):
Pour le compte de contrôle de version d’IE, utilisez une classe conditionnelle dans la comme le dit Paul Irish dans son article