CSS显示问题：内联块和IE7！

Question

我创建这个只是为了解释我的问题。一些列表项显示为内联块。我有一个原始的方法也没用，所以我使用了这个CSS。

http://jsbin.com/upexu/edit

这在FF和IE7中很有用，作为一个独立的。

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

火狐

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

现在任何人都可以告诉我为什么他们在我的例子中不起作用（见上图并查看网站，它位于最右边（不能错过）。

如果我给列表项明确宽度，它似乎在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”时，它又回到了我的IE上。

Answer 2

最有可能的是，您偶然触发了其中一个孩子的hasLayout，input或label