图例在IE7上不会左移

我在IE7上遇到了问题。我有以下的HTML格式。图例在IE7上不会左移

<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而不是传说，那么它就可以工作。这里是Jsfiddle enter image description here

来源

2012-04-05 Dips

为什么你会在这里使用一个'legend'元素？ 'legend'用于提供'fieldset'中的元素的描述，并且不应该在fieldset之外使用（afaik）。我认为这里的标题元素（如'h2'）更合适。 '传奇'也很难风格化，所以我很困惑为什么你会让自己变得更难。 – powerbuoy 2012-04-05 00:18:37

这不是有效的HTML，'legend'元素用于'fieldset's。 [可以使用此元素的上下文：作为fieldset元素的第一个子元素。]（http://dev.w3.org/html5/spec/single-page.html#the-legend-element） – steveax 2012-04-05 00:19:59

我知道你什么意思。它实际上在divs与图例分层的fieldset中。这是CMS中的一种格式，我无法更改。 – Dips 2012-04-05 00:20:53

仅适用于IE7，请尝试设置为显示：inline（非内嵌块）。

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

来源

2012-04-05 00:11:19 NICCAI

IE不明白display:inline-block，则可以使用display:inline用，而不是一个黑客单独针对该浏览器，像这样：

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

来源

2012-04-05 00:14:11

这也行不通。只有当我使用div而不是传说 – Dips 2012-04-05 00:15:20

@ user1193749凸轮你在http://jsfiddle.net发布测试用例吗？ – 2012-04-05 00:48:49

这里是[链接]（http://jsfiddle.net/2EZPY/2/） – Dips 2012-04-05 00:49:53

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

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

Here's the updated fiddle

来源

2012-04-05 03:29:29 ralgh

图例在IE7上不会左移

回答

相关问题