字段集< legend>的默认CSS值

本文介绍了字段集< legend>的默认CSS值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

在IE以外的浏览器中，< legend> 位于<$ c

< fieldset> stack.imgur/IyOrK.jpgalt =alt text>

我试图重置它的位置，使它像任何其他元素一样坐。

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

但图例 >仍然完全集中在行上。

是的，我可以添加margin / padding / top坐标，但是我想知道浏览器具有触发此布局的元素的任何默认值。

在Firefox（3.6.10），Chrome .472.63），Safari（5.0.2）

更新问题打开了一个星期，以防有人已经能够风格< legend> 元素。如果没有找到解决方案，我会接受@ jnpcl的回答。

解决方案

web.archive/web/20140209061351/tjkdesign/ articles / how_to_position_the_legend_element.asp

简单来说，浏览器不可能放置LEGEND $ b元素。

解决方法：将< legend> 在< span> 中，然后重新定位< span> 。 $ b

I'm trying to use a <legend> as a title inside a <fieldset>.

In browsers other than IE, the <legend> is positioned on the top border of the <fieldset>, with the text perfectly centered on the line.

I'm trying to reset it's position so that it sits just like any other element. i.e. an <h3>.

Here's the CSS I have so far.

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

But the legend is still perfectly centered on the line.

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.

Tested in Firefox (3.6.10), Chrome (6.0.472.63), Safari (5.0.2)

Update I'll leave this question open for another week just in case someone HAS been able to style <legend> elements. If no solutions are found I'll accept @jnpcl's answer.

解决方案

web.archive/web/20140209061351/tjkdesign/articles/how_to_position_the_legend_element.asp

Simply put, it is not possible across browsers to position the LEGEND element in a Fieldset.

Workaround: wrap the text from <legend> in a <span>, then reposition the <span>.