IE7 ne comprend pas l'affichage: bloc en ligne

127

Quelqu'un peut-il m'aider s'il vous plaît à comprendre ce bug? 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;   
}
html internet-explorer-7 css Lanthuong
la source
1
Que devez-vous réaliser exactement? Quel effet?
Iladarsda le

Réponses:

302

Le display: inline-block;hack IE7 est le suivant:

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

Par défaut, IE7 ne prend inline-blocken charge que les inlineéléments naturels ( tableau de compatibilité Quirksmode ), vous n'avez donc besoin de ce hack que pour les autres éléments.

zoom: 1est là pour déclencher un hasLayoutcomportement, et nous utilisons le hack de propriété star pour définir le displaysur inlineuniquement dans IE7 et les versions antérieures (les navigateurs plus récents ne l'appliqueront pas). hasLayoutet inlineensemble va essentiellement déclencher un inline-blockcomportement dans IE7, donc nous sommes heureux.

Ce CSS ne validera pas et peut de toute façon rendre votre feuille de style foirée, donc utiliser une feuille de style uniquement IE7 via des commentaires conditionnels pourrait être une bonne idée.

<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
kapa
la source
40
Je préfère *zoom:1;triger hasLayout. Il est donc plus clair que le *zoomet *displayaller ensemble
yunzen
4
@RoshanWijesena w3schools n'a rien à voir avec le w3c et les autorités ne le sont pas non plus sur ie7
Musa
1
@RoshanWijesena w3schools n'est pas une bonne ressource et n'est pas du tout officielle. Ne comptez pas dessus. Le fait qu'ils mentionnent ou ne mentionnent pas quelque chose ne veut vraiment rien dire.
kapa
1
Merci les gars! alors que dois-je utiliser comme documentation officielle en me demandant!
Roshan Wijesena
2
@RoshanWijesena Vous pouvez trouver les spécifications standard officielles sur w3.org , la page officielle du W3C. developer.mozilla.org est une excellente ressource que vous pouvez utiliser à la place de w3schools comme référence.
kapa
8

Mettre à 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 prend en charge par lui-même

Pour ceux qui doivent prendre en charge ces navigateurs de l'âge de pierre avant IE8 (ce n'est pas que l'IE8 soit si vieux, trop toux ):
Pour le compte du contrôle de version d'IE, utilisez une classe conditionnelle dans la <html>balise comme 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]-->

Par cela, 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

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 */
}
yunzen
la source
Le CSS que vous montrez ci-dessus a du sens, mais comment cela fonctionnerait-il exactement dans le HTML? Merci.
StephenESC
@StephenESC de deux manières. Ajoutez la classe inline-blockà l' frame-headerélément. Ou changer inline-blockpar frame-headerles sélecteurs CSS.
yunzen
1

IE7 ne prend pas correctement en charge 'inline-block', plus d'informations ici: LINK
Use peut utiliser: 'inline' à la place.

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

Iladarsda
la source
0

utiliser en ligne, il 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] {}
MiddleKay
la source
2
inlinen'est pas la même chose que inline-block. Par exemple, le height: 25px;dans l'exemple ne prendra pas effet lorsque l'élément est inline. De plus, la question ne dit rien sur les listes.
kapa