Question

渲染字段集的填充是怎么回事。它在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中按预期显示？

Answer 1

以下代码与浏览器兼容。

您可以单独控制字段集图例的缩进。在填充字段集时，您还要缩进图例。虽然在某些情况下这可能是期望的效果，但以下方法提供了更大的灵活性。另外，在内部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;
}

Answer 2

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

Answer 3

或真正顽皮的黑客（或将其置于条件[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

填充字段集，麻烦IE

3 个答案: