IE7 ne pas comprendre display: inline-block

Quelqu'un peut-il svp m'aider à obtenir ma tête autour de ce bug? Avec Firefox sa fonctionne bien mais avec Internet Explorer 7 de ses pas. 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;   
}
  • Qu'est-ce exactement pour vous d'atteindre? Quel est l'effet?
InformationsquelleAutor lanthuong | 2011-07-01
  1. 302

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

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

    Par défaut, IE7 ne supporte inline-block naturellement inline éléments (Quirksmode Tableau De Compatibilité), de sorte que vous aurez besoin de ce hack pour d'autres éléments.

    zoom: 1 est là pour déclencher hasLayout comportement, et nous utilisons la star de la propriété hack pour le réglage de la display à inline seulement dans IE7 et inférieur (les navigateurs les plus récents de ne pas l'appliquer). hasLayout et inline ensemble va déclencher inline-block comportement dans IE7, donc nous sommes heureux.

    Cette CSS ne sera pas validé, et peut rendre votre feuille de style foiré de toute façon, alors à l'aide d'un IE7 seule feuille de style par le biais de les commentaires conditionnels pourrait être une bonne idée.

    <!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
    • Je préfère *zoom:1; à triger hasLayout. Il est donc plus clairement que le *zoom et *display aller ensemble
    • Excellent travail autour de!
    • Résolu mon problème.
    • w3schools.com/cssref/pr_class_display.asp l'officiel du W3c n'a pas mentionné quoi que ce soit sur ie7 - inline block
    • w3schools n'a rien à voir avec le w3c et ne sont ni les autorités sur ie7
    • w3schools n'est pas une bonne ressource et n'est pas officiel du tout. Ne dépendent pas d'elle. Le fait qu'ils soient mentionnés ou de ne pas parler de quelque chose n'a pas vraiment dire quoi que ce soit.
    • merci les Gars! alors que dois-je utilisé comme un document officiel demandais juste!
    • Vous pouvez trouver l'officiel spécifications de la norme sur w3.org, la page officielle du W3C. developer.mozilla.org est une grande ressource que vous pouvez utiliser à la place de w3schools comme une référence.
    • tout simplement merci
    • J'ai mis les deux règles sur la même ligne avec un commentaire.

    InformationsquelleAutor kapa
  2. 8

    Mise à jour

    Que personne ne l'utilise IE6 et 7 plus je vais vous présenter une solution différente:

    Vous n'avez pas besoin d'un hack plus, parce que IE8 elle soutient par elle-même

    Pour ceux qui doivent soutenir ceux de l'âge de pierre des navigateurs avant de IE8 (Ce n'est pas que la IE8 est que le vieux, trop toux):

    Pour le compte de l'ei contrôle de version, l'utilisation Conditionnelle de Classe dans <html>tag Paul Irish états 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]-->

    Par la présente, vous aurez différentes classes dans la balise html pour différents Navigateurs IE

    Le CSS que vous avez besoin est comme suit

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

    Valider et vous n'avez pas besoin d'un supplément fichier CSS

    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 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 */
}
    • Le CSS vous montrer ci-dessus fait sens, mais comment exactement qui travaillent dans le code HTML? Merci.
    • deux façons. Ajoutez la classe inline-block à la frame-header élément. Ou changer inline-block par frame-header dans les sélecteurs CSS.
    InformationsquelleAutor yunzen
  3. 1

    IE7 ne prend pas en charge 'inline-block' correctement, plus d'infos ici: LIEN

    Utiliser pouvez utiliser: 'inline' à la place.

    Exactement ce que vous essayez d'atteindre? Nous faire un exemple et le mettre ici: http://jsfiddle.net/

    • salut. C'est ok avec "zoom:1'
    InformationsquelleAutor Iladarsda
  4. 0

    utilisation en ligne, il travaille avec ce type de sélecteurs d'éléments de la liste:

    ul li {}

    ou pour être précis:

    ul[className or name of ID] li[className or name of ID] {}
    • S'il vous plaît ne laissez un commentaire lorsque vous downvote une réponse.
    • inline n'est pas le même que inline-block. Par exemple, le height: 25px; dans l'exemple ne prendra effet que lorsque l'élément est inline. Aussi, la question ne dit rien sur les listes.
    InformationsquelleAutor MiddleKay