html - Legend doesn't float left on IE7

Question

I am having trouble on IE7. I have following html format.

<fieldset class="wrapper">
    <legend class="ct">Legend </legend>
    <div class="ct">Div 1</div>
    <div class="ct">Div 2</div>
</fieldset>

And this is the css style

.wrapper .ct {
    display:inline-block;
    *display:inline; /*IE7*/
    float:left
}

when I test this on other browser it works fine but IE7 does not. Please see screenshot below. But if I use div instead legend then it works. Here is on Jsfiddle

Answer 1

安德烈斯几乎拥有它。在“float：left”之后添加一个“*float：none”，你应该很好。

.wrapper .ct {
    display:inline-block;
    float:left;
    *display:inline;
    *float:none;
}​

这是更新的小提琴

Answer 2

仅对于 IE7，尝试设置为 display: inline (not inline-block)。

对了，忘记了一个痛苦的传说是多少。您可能需要使用绝对位置来放置它 - 在其他位置上留有左边距或在父级上使用 padding-left。取决于设计。

Answer 3

IE 不理解display:inline-block，您可以使用display:inlinehack 来单独针对该浏览器，如下所示：

.wrapper .ct {
    display:inline-block;
    *display:inline;
    float:left
}