Question

请参阅我的代码：http://losthobbit.net/temp/radiogroup.html

以下是代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio Group Test</title>
</head>
<body>
    <div id="Radiogroup" style="position: absolute; top: 9px; left: 12px; width: 234px; height: 177px; background-color:Aqua">
        <fieldset style="height: 100%">
            <legend>Radiogroup</legend>
        </fieldset>
    </div>
</body>
</html>

为什么fieldset超出了div的高度？

提前致谢

Answer 1

默认情况下，浏览器会向字段集添加一些填充。因为它通常采用原始的W3C盒子模型，所以填充增加了高度而不是它的一部分，因此你看到了。您可以通过在字段集上设置零填充来轻松删除它。

您还必须考虑从字段集顶部伸出的图例的高度。然而，这有点难以否定;您可能需要使用其位置样式，边距等来保持它的位置，但不要让它影响您的场地集。

Answer 2

这是由浏览器的样式表引起的。例如，在Chrome中，会添加一些填充：

    fieldset {
display: block;
-webkit-margin-start: 2px;
-webkit-margin-end: 2px;
-webkit-padding-before: 0.35em;
-webkit-padding-start: 0.75em;
-webkit-padding-end: 0.75em;
-webkit-padding-after: 0.625em;

尝试使用reset.css或在字段集上设置padding: 0。

当高度设置为100％时，为什么字段集超过其容器的高度？

2 个答案: