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对另一个问题指出了我的传奇标签，事实上，如果我把它留下来，一切都很好。

所以我的问题是：

是否有解决方案同时拥有图例标记和填充？我快速的帽子尝试（第一个元素的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>

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

1 个答案: