html - 我如何拥有图例的 fieldset::before 规则帐户？

Question

我将内容放在表单中每个字段集的::before 规则中，但它们似乎放在字段的图例下，而不是像我期望的那样是第一个子项。我想让::before 内容与图例的顶部对齐，而不是输入元素的顶部。将::before 内容垂直移动到整个板上是不够的，因为我的图例是不同的高度。有谁知道为什么会这样以及如何获得我想要的行为？

预期行为:

before    legend
          legend
          legend

          input

HTML:

<form>
    <fieldset>
        <legend>This is the legend.</legend>
        <input type="text" />
    </fieldset>
    <fieldset>
       <legend>This is a very very very very very very very very very very very very very very very very very very very very very long legend.</legend>
       <input type="text" />
    </fieldset>
</form>​

CSS:

fieldset
{
    margin-left: 40px;
    width: 120px;
}

fieldset::before
{
    margin-left: -40px;
    float: left;

    content: "before";
}​

http://jsfiddle.net/GYzTA/2/

编辑:

我找到了一个仅更改 CSS 选择器的“doh”解决方案，但我仍然很好奇为什么 fieldset::before 规则似乎在图例之后插入内容。

fieldset legend::before
{
    margin-left: -40px;
    content: "before";
}​

Answer 1

引用 Default CSS values for a fieldset <legend>

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

解决方案:使用<span>代替<legend>