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

Posted 2023-02-16

【中文标题】有一个图例会导致 IE 忽略字段集的顶部填充 - 替代方案？

【英文标题】：Having a legend causes IE to ignore the top padding of a fieldset - alternatives?

【发布时间】：2012-07-09 03:19:24

【问题描述】：

我正在创建一个表单，但遇到了字段集的填充问题。虽然在 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 的另一个问题将我指向了图例标签，事实上，如果我把它排除在外，一切都很好。

所以我的问题是：

是否有解决方法来同时使用图例标签和填充？我的快速顶顶尝试（第一个元素的顶部边距）没有效果。

或者我是否必须放弃（语义上正确的）图例标签并将其替换为（更随意的）标题之类的东西？这对屏幕阅读器有什么影响？

【参考方案1】：

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

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

【讨论】：

这行得通。谢谢。我只需要看看我是否可以让我的框架大师......好吧......调整框架，以便它在呈现页面时生成这个嵌套结构......我会把这个问题留一天或二，以防万一，好吗？ ;)