IE8 中没有字段集填充顶部

【问题标题】：No fieldset padding top in IE8IE8 中没有字段集填充顶部
【发布时间】：2012-11-04 05:11:16
【问题描述】：

示例表格：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
fieldset {padding: 50px;}
</style>
</head>
<body>
<form>
 <fieldset>
  <legend>Form</legend>
  <p>
  <label for="name">Name </label><input id="name" type="text">
  </p>
  <p>
  <label for="email">Email </label><input id="email" type="text">
  </p>
 </fieldset>
</form>
</body>
</html>

它适用于所有主流浏览器，但在 IE8 中没有填充顶部。有没有跨浏览器的解决方案？

【问题讨论】：

不，它没有。为了更好地展示问题，我只是将内边距增加到 50 像素。
我已经在我安装的每个浏览器中运行了您的示例，包括 ie7/8/9、firefox、chrome 和 opera，并且对于任何给定值，填充都按预期工作。
这是我在 IE8 中看到的内容：Sample form。请比较顶部和底部填充。

标签： html css forms padding fieldset

【解决方案1】：

这似乎是旧版本 IE 中的一个错误，可能是由于 legend 元素（嵌套在 fieldset 中但以特殊方式呈现）周围的一些混淆引起的，因此填充在表单上方错位.我可以或多或少地在 IE 9 上以 Quirks 模式以及 IE 8 和 IE 7 仿真模式重现该问题。

作为一种解决方法，不要在 fieldset 元素上设置顶部填充。相反，在其中的第一个普通元素上设置一个上边距（不包括 legend 元素）。

【讨论】：

是的。您可以在旧的 ie 中看到此 jsfiddle 中字段集上方的填充：jsfiddle.net/XSrK4 将其与没有标签的此字段集进行比较，它没有此错误：jsfiddle.net/XSrK4/1 所以您可以做的另一个解决方案是省略图例标签和填充将正常工作。
@3dgoo：但我需要传奇。
然后 Jukka 的回答解释了一种方法。