web-dev-qa-db-fra.com

IE7 ne comprend pas l'affichage: inline-block

Est-ce que quelqu'un peut m'aider à comprendre ce bogue? Avec Firefox, cela fonctionne bien, mais avec Internet Explorer 7, ce n’est pas le cas. Il semble ne pas comprendre le display: inline-block;.

html:

<div class="frame-header">
    <h2>...</h2>
</div>

css:

.frame-header {
    height:25px;
    display:inline-block;   
}
htmlinternet-explorer-7css
128
lanthuong

Le IE7 display: inline-block; hack est comme suit:

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

Par défaut, IE7 ne supporte que inline-block sur naturellement inline éléments ( Tableau de compatibilité Quirksmode ), vous n'avez donc besoin de ce hack que pour les autres éléments.

zoom: 1 est là pour déclencher le comportement hasLayout , et nous utilisons le hack de la propriété star pour définir le display sur inline seulement dans IE7 et inférieur (les navigateurs récents n'appliqueront pas cela). hasLayout et inline ensemble déclencheront essentiellement inline-block _ comportement dans IE7, donc nous sommes heureux.

Ce CSS ne sera pas validé et peut de toute façon gâcher votre feuille de style. L'utilisation d'une feuille de style exclusivement pour IE7 via commentaires conditionnels pourrait être une bonne idée.

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

Mise à jour

Comme personne n’utilise plus IE6 et 7, je vais présenter une solution différente:
Vous n'avez plus besoin d'un hack, car IE8 le supporte tout seul

Pour ceux qui doivent prendre en charge ces navigateurs avant l'âge IE8 (ce n'est pas que IE8 soit aussi vieux tousse):
Pour le compte de IE contrôle de version, utilisez une classe conditionnelle dans <html>tag like Paul Irish déclare dans son article

<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->

En cela, vous aurez différentes classes dans html-tag pour différents IE navigateurs

Le CSS dont vous avez besoin est comme suit

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

Cela va valider et vous n'avez pas besoin d'un fichier CSS supplémentaire

Ancienne 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 trigger 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 */
}
8
yunzen

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

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

1
Iladarsda

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

ul li {}

ou pour être précis:

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