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

Question

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? Je vous remercie!

 #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 }
 

Answer 1

Dans IE6/IE7, display: inline-block ne fonctionne que sur des éléments qui sont naturellement inline (comme 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 "coffre-fort" CSS hack pour s'appliquer à seulement IE7 et inférieur.

Pour IE6/7, zoom: 1 offre hasLayout. Ayant "mise en page" est une condition préalable pour l' display: inline-block , fonctionne toujours.

Il est possible d'appliquer cette solution de contournement tout en gardant CSS valide, mais ce n'est pas vraiment la peine de penser à, en particulier si vous êtes déjà à l'aide de n'importe quel fournisseur préfixé propriétés.

Lire ceci pour plus d'informations sur l' display: inline-block (mais oublier -moz-inline-stack, qui a été nécessaire pour la désormais ancienne version 2 de Firefox).

Answer 2

*display:inline fonctionne très bien comme bidouillage IE7 . Mais vous pouvez ajouter zoom:1 au code en tant que *background:#fff; *display:inline; zoom:1 . Ici, vous pouvez mettre votre code de couleur de fond. Parfois, vous ne verrez pas la disposition à 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 d’autres navigateurs.