Html 填充字段集，IE出现问题_Html_Css_Padding_Fieldset

Html 填充字段集，IE出现问题

html css

Html 填充字段集，IE出现问题,html,css,padding,fieldset,Html,Css,Padding,Fieldset,渲染字段集的填充时发生了什么。它在FF和Chrome中的行为与预期一致，但在IE中失败。这就是我所说的代码： <html> <head> </head> <body> <fieldset> <legend>Hello world!</legend> <div>Lorem ipsum</div>

渲染字段集的填充时发生了什么。它在FF和Chrome中的行为与预期一致，但在IE中失败。这就是我所说的代码：

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

也可以在这里看到：

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

或真正顽皮的黑客（或将其放在有条件的[lte IE 8]CSS）版本中

将

标签

底部的边距与

字段集

的顶部边距相同也可以起到同样的作用。显然，其他浏览器不应同时获得这两种功能

PS：我认为这也适用于IE6

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

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

将

display:block

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

这实际上比公认的答案更好，因为它不会破坏像

textarea{box size:border box；width:100%；}

这样的东西。

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

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;
}

fieldset {
  border: 2px solid silver;
}

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

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}