图例不会在 IE7 上向左浮动答案

【问题标题】：Legend doesn't float left on IE7图例不会在 IE7 上向左浮动
【发布时间】：2023-04-01 04:45:01
【问题描述】：

我在 IE7 上遇到问题。我有以下html格式。

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

这是css样式

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

当我在其他浏览器上测试它时，它可以正常工作，但 IE7 不能。请看下面的截图。但是，如果我使用 div 而不是 legend 则它可以工作。这是Jsfiddle

【问题讨论】：

为什么要在这里使用legend 元素？ legend 用于提供fieldset 内部元素的描述，并且不应该（afaik）在fieldsets 之外使用。我认为标题元素（例如h2）在这里更合适。 legends 也很难设计，这就是为什么我很困惑为什么你会让自己变得更难。
这不是有效的 HTML，legend 元素用于 fieldsets。 Contexts in which this element can be used: As the first child of a fieldset element.
我知道你的意思。它实际上在 div 与图例分层的字段集中。这是 CMS 中的一种格式，我无法更改。

【解决方案1】：

安德烈斯几乎得到了它。在“float: left”之后添加一个“*float: none”，你应该会很好。

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：