CSS显示:inline-block在IE7中不起作用 [英] CSS display: inline-block doesn't work in IE7

问题描述

我创建这个文件只是为了解释我的问题.它是某些列表项目显示为嵌入式块.我有一个原始方法也不起作用，所以我使用了这个 CSS .

I created this to simply explain my problem. It is of some list items being displayed as inline blocks. I had an original method that didn't work either, so I used this CSS.

http://jsbin.com/upexu/edit

作为独立版本，它在FF和IE7中效果很好.

This works great in FF and IE7, as a standalone.

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

Unfortunately, in my implementation on my site, it doesn't display correctly in IE7 (they appear stacked one above the other).

现在任何人都可以告诉我为什么他们在我的示例中不起作用(请参见上图并查看站点，它在最右边(不能错过)).

Now can anyone tell me why they don't work in my example (see images above and look at site, it is in the far right (can't miss it).

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

It seems to work in IE7 if I give the list items an explicit width - but this seems dangerous, as well as an extra piece of maintenance I don't want to do. I could probably do li#nsw { width: 3.5em } but is ugly and I shouldn't have to.

我确实使用 Eric Meyer重新加载了CSS重置

如果您知道解决方案，请告诉我们！

If you know of a solution, please tell!

谢谢.

以下是复选框的HTML

Here is the HTML of the checkboxes

<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，尤其是通过使用样式重置.

Though I do recommend looking at the site above, as a lot more CSS is inherited, especially by using the style reset.

推荐答案

据我所知，它是标签的CSS上的"float:right".无论您做什么，都应尝试在不设置浮点数的情况下进行操作:

Far as I can tell, it's the "float: right" on the css for the label. Whatever you are doing, try doing it without setting the float: right on the label.

当我删除"float:right"时，它又回到了IE的内联状态.

when I removed "float: right" it went back to inline on my IE.

这篇关于CSS显示:inline-block在IE7中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！