字段集的默认 CSS 值 <legend>答案

【问题标题】：Default CSS values for a fieldset <legend>字段集的默认 CSS 值 <legend>
【发布时间】：2011-08-24 12:57:11
【问题描述】：

我正在尝试使用 <legend> 作为 <fieldset> 中的标题。

在 IE 以外的浏览器中，<legend> 位于<fieldset> 的上边框，文本完全居中。

我正在尝试重置它的位置，使其与任何其他元素一样。即<h3>。

这是我目前拥有的 CSS。

fieldset legend {
    margin: 0;
    padding: 0;
    position: static;
    border: 0;
    top: auto; left: auto;
    float: none;
    display: block;
    font-size: 14px;
    line-height: 18px;
}

但图例仍然完全居中。

是的，我可以添加边距/填充/顶部坐标，但我想知道浏览器是否有触发此布局的元素的任何默认值。然后我想覆盖这些值。

在 Firefox (3.6.10)、Chrome (6.0.472.63)、Safari (5.0.2) 中测试

更新我将把这个问题留一个星期，以防有人能够设置<legend> 元素的样式。如果没有找到解决方案，我会接受@jnpcl 的回答。

【问题讨论】：

你的目标是 IE 吗？还是只针对 Firefox、Chrome 和 Safari？
@LeguRi，我的目标是所有现代浏览器，所以你提到的所有浏览器。使用我上面的 CSS 属性，IE 将图例放置在我想要的位置。
我几乎放弃了legend 标签，因为它不愿意被样式化。在我处理的最后一个表单中，我将键盘扔到了显示器上，并改用了 h3 s...
@蒋毅：你猜怎么着，地板上有一个破咖啡杯，我正在使用<h3>标签。
我发现这很有用并帮助我解决了同样的问题mattheerema.com/articles/web-design/2006/04/…

标签： html css legend fieldset

【解决方案1】：

这就够了：

 form legend{
    float: left;
    width: 100%;
 }

【讨论】：

这是更好的答案，即使在 2018 年也是如此。
应该是选择的答案。我在 IE11、Firefox、Chrome 和 Safari 上进行了测试。这可以完成一个简单的文本图例。
是的，这是最好的答案！

【解决方案2】：

https://web.archive.org/web/20140209061351/http://tjkdesign.com/articles/how_to_position_the_legend_element.asp

简单地说，不可能跨越浏览器定位图例 Fieldset 中的元素。

解决方法：将 <legend> 中的文本包裹在 <span> 中，然后重新定位 <span>。

【讨论】：

讨厌刻薄，但您是否阅读了整个问题？ Yes, I can add a margin/padding/top coordinate but I want to know if the browser has any default values for the element that trigger this layout. I want to then, override these values.
从我链接的文章看来，默认值是不可覆盖的。
如果他的目标是“所有现代浏览器”，那么我和@jnpcl 合作。 +1
我将删除我的反对票，因为您删除了使用定位的代码。
仅供参考，将<legend> 标签包装在<span> 中可用于定位，但它会破坏使用屏幕阅读器/旁白的可访问性。它无法将父 <fieldset> 与 <legend> 标记进行本地分组。

【解决方案3】：

我刚刚给我的<legend> 设置了样式，给他们一个position: absolute; top: -25px; 和父<fieldset> 一个position: relative; padding-top: 30px;

【讨论】：

【解决方案4】：

根据规范，fieldset 和 legend 元素的 here is the default styling。通过重置这些属性，您可以使用干净的 legend 元素。

【讨论】：

【解决方案5】：

根据HTML - Living Standard，以下样式就像默认样式一样工作：

fieldset {
    display: block;
    margin-inline-start: 2px;
    margin-inline-end: 2px;
    border: groove 2px ThreeDFace;
    padding-block-start: 0.35em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
    padding-inline-start: 0.75em;
    min-inline-size: min-content;
}

legend {
    padding-inline-start: 2px; padding-inline-end: 2px;
}

【讨论】：

【解决方案6】：

根据specification，如果是float: none，图例只是“渲染图例”。

这意味着通过这样做：

<fieldset>
    <legend style='float: left'> Heading </legend>
    <div class='clearfix'></div>
    <!-- Your form elements here -->
</fieldset>

这使得图例表现得像一个普通的（如果是浮动的）元素。

注意：clearfix 是 Bootstrap clearfix 类：

.clearfix::after {
    clear: both;
}
.clearfix::before, .clearfix::after {
    display: table;
    content: " ";
}

（已经发布了类似的答案，但这不包括 clearfix 技巧，以及对规范的引用，表明这不是随机的，而是指定的可靠行为。）

【讨论】：