3

样品形式：

<!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 中没有填充顶部。任何跨浏览器解决方案？

4

1 回答 1

3

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

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

于 2012-11-03T21:11:16.803 回答