填充字段集,麻烦IE

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中按预期显示?

wdm*_*wdm 5

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

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