4

渲染字段集的填充发生了什么。它在 FF 和 Chrome 中表现如预期，但在 IE 中失败。这是我正在谈论的代码：

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

这是CSS

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

也可以在这里看到：http: //jsfiddle.net/nRAGM/6/

所以我的问题是：如何让上面的 html 按预期在 IE 中显示？

4

3 回答 3

7

以下代码是跨浏览器兼容的。

您可以独立控制字段集图例的缩进。在填充字段集时，您还缩进了图例。虽然在某些情况下这可能是所需的效果，但以下方法提供了更大的灵活性。此外，将边距添加到内部 div 将使您更好地控制布局（因为向容器添加填充会增加不需要的宽度）。

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}
于 2011-04-12T09:06:55.003 回答
2

添加display:block到字段集样式应该可以解决您的问题。它对我有用！试用。

于 2012-08-05T12:55:11.457 回答
1

或真正顽皮的 hack（或将其放入有条件的 [lte IE 8] CSS）版本。

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

将其底部的边距与' 的顶部填充label相同也可以解决问题。fieldset显然没有其他浏览器应该同时获得

PS：我认为这也适用于 IE6

于 2011-04-12T09:05:24.900 回答