图例在 IE7 和 8 中重叠边框但不是 9

Posted 2023-02-16

【中文标题】图例在 IE7 和 8 中重叠边框但不是 9

【英文标题】：Legends overlapping border in IE7 and 8 but not 9

【发布时间】：2012-06-10 14:59:54

【问题描述】：

我遇到了在 IE7 和 IE 8 的字段集中包含图例的问题。

基本上我有一组带有以下 CSS 的字段集：

fieldset 
    padding: 10px;
    border-top: 1px solid silver !important;

对于传说：

legend 
    float: left;

我没有对图例应用 clearfix 或任何东西，因为它们在所有其他浏览器中都很好。它们是字段集中的第一个元素，我不知道任何浮动问题实际上会导致它们浮动在容器上方或顶部的错误（当然，我们都听说过常见的浮动下降，它们在下面显示这种行为容器）。

有什么建议吗？

【参考方案1】：

样式化legend 元素目前很痛苦，而且不能跨浏览器。使用另一个元素（如DL/DT 或H4）而不是legend 通常更容易（尽管不幸的是语义较少）。

legend 的大多数样式问题可以通过使用 legend 的包装器来解决，并将样式应用到包装器而不是 legend 本身 (<div><legend></legend></div>)，但目前是 invalid（有相应的[尚未解决]issue #200 在 WG 问题跟踪器中）。