html - 拥有图例会导致 IE 忽略字段集的顶部填充 - 替代方案？

Question

我在创建表单时遇到了字段集的填充问题。虽然在 Opera、FF 和 Chrome 中一切看起来都不错，但 IE 7 和 8 只是简单地丢弃了字段集中的任何顶部填充。以下代码正确地向 fielset 的左侧、底部和右侧添加了填充(尽管后者会导致此 known problem )，但将内容的第一行直接放置在图例下方且没有间距:

<form>      
  <fieldset style="padding:30px;">
      <legend>Legend</legend>
      <label for="input">Label</label>
      <input type="text" id="input" />  
  </fieldset>    
 </form>

然而，this answer另一个问题将我指向了 legend 标签，实际上，如果我将其遗漏，一切都很好。

所以我的问题是:

是否有同时具有图例标签和填充的变通方法？我的快速 top-of-the-hat 尝试(第一个元素上的 margin-top)没有效果。

或者我是否必须放弃(语义正确的)图例标签并将其替换为诸如标题之类的(更随意的)内容？这对屏幕阅读器有什么影响？

Answer 1

是否可以从字段集中删除所有填充，而是在字段集中创建一个添加填充的 div？

<form>
  <fieldset>
      <legend>Legend</legend>
      <div style="padding:30px;">
         <label for="input">Label</label>
         <input type="text" id="input" />
      </div>
  </fieldset>
</form>