CSS 显示：inline-block 在 IE7 中不起作用答案

【问题标题】：CSS display: inline-block doesn't work in IE7CSS 显示：inline-block 在 IE7 中不起作用
【发布时间】：2019-06-02 18:11:18
【问题描述】：

我创建这个只是为了解释我的问题。它是一些显示为内联块的列表项。我有一个原始方法也不起作用，所以我使用了这个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 被继承，尤其是通过使用样式重置。

【问题讨论】：

你应该发布实际的 html + css。很难从网站获取 html，因为 html 是构建的
那个标题真的很邪恶！特别是因为它不是在 Flash 中完成的，所以 Flashblock 没有阻止它：P 我不希望我的网页作为我的汽车旅行：不足为奇，并且几乎没有意外的动作/分心。
您可以使用 FireBug 从表单中查看 HTML。无论如何，我会发布一个摘录，

标签： css firefox internet-explorer-7

【解决方案1】：

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

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

【讨论】：

+1 并接受了答案 - 因为您在我打字时回答了我的解决方案：D

【解决方案2】：

很可能，您不小心在其中一个孩子（input 或 label）上触发了 hasLayout

【讨论】：

也许，除了我将输入向左浮动和标签向右浮动，这意味着它们将自动成为块级元素对吧？谢谢你的回答。