web-dev-qa-db-fra.com

Le blocage en ligne ne fonctionne pas dans Internet Explorer 7, 6

J'ai ce code CSS avec un inline-block. Quelqu'un peut-il me dire comment le faire fonctionner dans Internet Explorer 6 et 7. Des idées? Peut-être que je fais quelque chose de mal? Merci!

#signup {
   color:#FFF;
   border-bottom:solid 1px #444;
   text-transform:uppercase;
   text-align:center;
}
#signup #left {
   display: inline-block
}
#signup #right {
   background-image:url(images/signup.jpg);
   border-left: solid 1px #000;
   border-right: solid 1px #000;
   display: inline-block; 
   padding:1% 2%
   width:16%;
}
#signup #right a { font-size:100%; font-weight:bold } 
#signup #right p { font-size:90%; font-weight:bold }
#signup a:hover  { color:#FFF; text-decoration:underline }
internet-explorerinternet-explorer-7internet-explorer-6css
77
webmasters

Dans IE6/IE7, display: inline-block ne fonctionne que sur les éléments qui sont naturellement en ligne (tels que spans).

Pour le faire fonctionner sur d'autres éléments tels que divs, vous avez besoin de ceci:

#yourElement {
    display: inline-block;
    *display: inline;
    zoom: 1;
}

*display: inline utilise un hack CSS "sûr" pour s'appliquer à niquement IE7 et inférieur .

Pour IE6/7, zoom: 1 fournit hasLayout . La "mise en page" est une condition préalable pour display: inline-block pour toujours travailler.

Il est possible d'appliquer cette solution de contournement tout en conservant un CSS valide, mais cela ne vaut pas vraiment la peine d'y penser, en particulier si vous utilisez déjà des propriétés préfixées par un fournisseur.

Lisez ceci pour plus d'informations sur display: inline-block (mais oubliez -moz-inline-stack, qui n'était nécessaire que pour l'ancien Firefox 2).

181
thirtydot

*display:inline fonctionne très bien comme piratage IE7. Mais, vous pouvez ajouter zoom:1 au code en tant que *background:#fff; *display:inline; zoom:1. Ici, vous pouvez mettre votre code couleur d'arrière-plan. Parfois, vous ne verrez pas la mise en page à l'écran, par exemple, les éléments de liste n'apparaîtront pas à l'écran. Ensuite, dans de tels cas, cela fonctionne très bien et apparaît comme dans les autres navigateurs.

2
akgupta