CSS的显示问题：inline-block和IE7！ [英] Problem with CSS's display: inline-block and IE7!

问题描述

我创建这个简单地解释我的问题。它是一些列表项显示为内联块。我有一个原来的方法，也没有工作，所以我使用这个。

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

感谢。

更新

这里是复选框的HTML

 < ul class =checkboxes> 
< li>< input type =radioid =free-case-review-nswvalue =nswname =state/>< label for =free-case- review-nsw>< acronym title =New South Wales> NSW< / acronym>< / label>< / li> 
 
< li>< input type =radiochecked =checkedid =free-case-review-qldvalue =qldname =state/> ; label for =free-case-review-qld>< acronym title =Queensland> QLD< / acronym>< / label>< / li> 
 
< li>< input type =radioid =free-case-review-ntvalue =ntname =state/>< label for = free-case-review-nt>< acronym title =Northern Territory> NT< / acronym>< / label>< / li> 
 
< li>< input type =radioid =free-case-review-othervalue =othername =state/>< label for = free-case-review-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输入{
 display：inline; 
 width：auto; 
 border：none; 
 margin-bottom：0; 
 padding：0; 
 float：left; 
} 
 
＃free-case-review-form .checkboxes li label {
 display：inline; / *只是一个尝试 - 他们应该块级别* / 
 float：right; 
} 
  

虽然我建议看看上面的网站，继承，特别是通过使用样式重置。

解决方案

我可以告诉，它是float：right为标签。无论你在做什么，尝试做，而不设置浮动：正确的标签上。

当我删除float：right它回到我的IE的内联。

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

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

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

Firefox

IE7

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

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.

I do use Eric Meyer's CSS Reset Reloaded.

If you know of a solution, please tell!

Thanks.

Update

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>

And here is the 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;
    }

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

解决方案

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.

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

这篇关于CSS的显示问题：inline-block和IE7！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！