CSS 显示 : inline-block doesn't work in IE7

Question

我创建这个只是为了简单地解释我的问题。它是一些列表项显示为内联 block 。我有一个原始方法也不起作用，所以我使用了这个 CSS .

http://jsbin.com/upexu/edit

这在 FF 和 IE7 中非常有效，作为一个独立的。

不幸的是，在我网站上的实现中，它无法在 IE7 中正确显示(它们堆叠在一起)。

火狐

IE7

现在谁能告诉我为什么他们在我的例子中不起作用(见上图并查看网站，它在最右边(不能错过)。

如果我给列表项一个明确的宽度，它似乎在 IE7 中工作 - 但这似乎很危险，以及我不想做的额外维护。我可能可以做 li#nsw { width: 3.5em } 但是很丑，我不应该必须这样做。

我用 Eric Meyer's CSS Reset Reloaded .

如果您知道解决方案，请告诉!

谢谢。

更新

这是复选框的 HTML

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

这是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;
    }

虽然我确实建议查看上面的站点，因为继承了很多 CSS，尤其是通过使用样式重置。

Answer 1

据我所知，它是标签的 css 上的“float: right”。无论您在做什么，请尝试在不设置 float: right on the label 的情况下进行。

当我删除“float: right”时，它又回到我的 IE 中内联。