IE7 ne comprend pas l’affichage: bloc en ligne

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.

    

Mettre à jour

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

    

De cette manière, vous aurez différentes classes dans html-tag pour différents navigateurs IE

Le CSS dont vous avez besoin est le suivant

 .inline-block { display: inline-block; } .lt-ie8 .inline-block { display: inline; zoom: 1; } 

Cela validera et vous n’avez pas besoin d’un fichier CSS supplémentaire


Vieille réponse

 .frame-header { background:url(images/tab-green.png) repeat-x left top; height:25px; display:-moz-inline-box; /* FF2 */ display:inline-block; /* will also sortinggger hasLayout for IE6+7*/ } /* Hack for IE6 */ * html .frame-header { display: inline; /* Elements with hasLayout and display:inline behave like inline-block */ } /* Hack for IE7 */ * + html .frame-header { display: inline; /* Elements with hasLayout and display:inline behave like inline-block */ } 

IE7 ne supporte pas correctement ‘inline-block’, plus d’infos ici: LINK
Use peut utiliser: ‘inline’ à la place.

Qu’est-ce que vous essayez de réaliser exactement? Faites-nous un exemple et mettez ici: http://jsfiddle.net/

utiliser inline, il fonctionne avec ce type de sélecteurs pour les éléments de liste:

 ul li {} 

ou être spécifique:

 ul[className or name of ID] li[className or name of ID] {}