當高度設置爲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超過其容器的高度？

回答

相關問題