Mul*_*ner 2 html css padding fieldset
渲染字段集的填充是怎么回事.它在FF和Chrome中表现如预期,但在IE中失败.这是我正在谈论的代码:
<html>
<head>
</head>
<body>
<fieldset>
<legend>Hello world!</legend>
<div>Lorem ipsum</div>
</fieldset>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
这就是css
fieldset {
border: 1px solid black;
padding: 30px;
}
fieldset legend {
background-color: silver;
}
fieldset div {
border: 1px dotted silver;
}
Run Code Online (Sandbox Code Playgroud)
也可以在这里看到:http: //jsfiddle.net/nRAGM/6/
所以我的问题是:如何让上面的html在IE中按预期显示?
以下代码是跨浏览器兼容的.
您可以单独控制字段集图例的缩进.在填充字段集时,您还要缩进图例.虽然在某些情况下这可能是期望的效果,但以下方法提供了更大的灵活性.同时在内部div中添加边距可以更好地控制布局(因为向容器添加填充可以添加不需要的宽度).
fieldset {
border: 2px solid silver;
}
fieldset legend {
border: 2px solid silver;
margin-left: 30px;
}
fieldset div {
border: 1px dotted silver;
margin: 30px;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
15179 次 |
| 最近记录: |