Problème avec CSS display: inline-block et IE7!

J'ai créé ce simplement expliquer mon problème. Il est de certains éléments de la liste affichée en ligne blocs. J'ai eu une méthode originale qui ne fonctionne pas non plus, j'ai donc utilisé cette CSS.

http://jsbin.com/upexu/edit

Cela fonctionne très bien dans FF et IE7, en tant qu'unité autonome.

Malheureusement, dans mon application sur mon site, il ne s'affiche pas correctement dans IE7 (ils apparaissent empilées les unes sur les autres).

Firefox

firefox http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ff.png

IE7

ie7 http://www.alexanderdickson.com/hosted/stackoverflow.com/display-inline-ie7.png

Maintenant quelqu'un peut me dire pourquoi ils ne travaillent pas dans mon exemple (voir images ci-dessus et de regarder le site, il est à l'extrême droite (ne pouvez pas le manquer).

Il semble fonctionner dans IE7 si je donne les éléments de la liste explicite de la largeur, mais cela semble dangereux, ainsi qu'une pièce supplémentaire de l'entretien, je ne veux pas faire. Je pourrais probablement le faire li#nsw { width: 3.5em } mais c'est moche et je ne devrait pas.

Je ne l'utilisation de Eric Meyer CSS Reset Reloaded.

Si vous connaissez une solution, s'il vous plaît dites!

Grâce.

Mise à jour

Voici le code HTML de l'cases

<ul class="checkboxes">
<li><input type="radio" id="free-case-review-nsw" value="nsw" name="state" /><label for="free-case-review-nsw"><acronym title="New South Wales">NSW</acronym></label></li>
<li><input type="radio" checked="checked" id="free-case-review-qld" value="qld" name="state" /><label for="free-case-review-qld"><acronym title="Queensland">QLD</acronym></label></li>
<li><input type="radio" id="free-case-review-nt" value="nt" name="state" /><label for="free-case-review-nt"><acronym title="Northern Territory">NT</acronym></label></li>
<li><input type="radio" id="free-case-review-other" value="other" name="state" /><label for="free-case-review-other">Other</label></li>
</ul>

Et voici le CSS

 #free-case-review-form .checkboxes {
border: 1px solid #000;
padding: 5px 0;
margin-bottom: 8px;
overflow: hidden;
}
#free-case-review-form .checkboxes li {
display: inline-block;
display: -moz-inline-box;
*display: inline; /* for ie */
zoom: 1;
overflow: hidden;
}
#free-case-review-form .checkboxes li input {
display: inline;
width: auto;
border: none;
margin-bottom: 0;
padding: 0;
float: left;
}
#free-case-review-form .checkboxes li label {
display: inline; /* just an attempt - they should be block level anyway */
float: right;
}

Bien que je vous recommande de regarder le site ci-dessus, beaucoup plus de CSS est hérité, en particulier en utilisant le style de réinitialisation.

Vous devriez poster du html + css. Il est difficile d'obtenir le code html à partir du site parce que le html est construit
Cet en-tête est vraiment mal! Spécialement parce que, comme il n'est pas fait en flash Flashblock ne pas bloquer 😛 je wan pas mes pages web comme mes trajets en voiture: rien de surprenant et avec peu inattendu mouvements/distractions.
Vous pouvez utiliser FireBug pour voir le code HTML du formulaire. Je vais poster un extrait de toute façon,

OriginalL'auteur alex | 2010-01-14