Default CSS values for a fieldset

问题:

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.

回答1:

https://web.archive.org/web/20140209061351/http://tjkdesign.com/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>.

回答2:

This is enough :

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

回答3:

I've just styled my <legend>'s by giving them a position: absolute; top: -25px; and the the parent <fieldset> with a position: relative; padding-top: 30px;

回答4:

According to the specification, here is the default styling of the fieldset and legend elements. By resetting those properties, you can have a clean legend element to work with.

回答5:

As per HTML - Living Standard, the below styles are working like a default:

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;
}