字段集 <legend> 的默认 CSS 值

Question

我正在尝试使用 <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 的回答。

原文由 Marko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

简而言之，不可能跨浏览器在 Fieldset 中定位 LEGEND 元素。

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

原文由 drudge 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

这就够了 ：

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

原文由 Neoweiter 发布，翻译遵循 CC BY-SA 3.0 许可协议