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

在见行动我的代码：http://losthobbit.net/temp/radiogroup.html 当高度设置为100％时，为什么fieldset超过其容器的高度？

下面的代码：

<!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>

为什么字段集超过div的高度？

在此先感谢

来源

2011-06-03 Stephen Oberauer

浏览器以不同方式处理边距和填充;看看''reset.css'' – pixelbobby 2011-06-03 16:10:50

谢谢你的提示，pixelbobby – 2011-06-03 16:21:20

我希望你找到你的方式，霍比特人...... – pixelbobby 2011-06-03 16:25:22

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

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

来源

2011-06-03 16:09:46 BoltClock

你回答得太快了。感谢关于填充获得添加到高度而不是字段集的一部分的解释。不知道，事实上从来没有注意到它。 – cabaret 2011-06-03 16:14:58

@cabaret：我做的垃圾邮件编辑链接相当公平很多... – BoltClock 2011-06-03 16:16:24

这是由浏览器的样式表引起的。例如，在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。

来源

2011-06-03 16:12:16 cabaret

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

回答

相关问题