在为fieldset元素添加边框时，有没有办法获得完整的边框？

Question

当我向fieldset元素添加边框然后向下拖动legend以作为排序标题时，fieldset中的差距仍然存在。

有没有办法拥有整个边框，而无需添加包装div并在其上设置边框？

实施例

CSS

fieldset legend {
    position: relative;
    bottom: -40px; 
    background: transparent; 
}

jsFiddle

Answer 1

看看这个jquery小提琴：jsFiddle

Answer 2

在IE7 / IE8及最近版本的Firefox，Chrome，Safari，Opera中测试。

它们看起来都是一样的，但IE7在左边添加了一点空间。

我必须添加一个无辜的小包装span。

http://jsfiddle.net/thirtydot/ErZEj/

<强> HTML：

<form>
    <fieldset>
        <legend><span>I am</span></legend>

        <div style="margin-top:80px">dsfsdf</div>

    </fieldset>
</form>

<强> CSS：

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative
}
fieldset legend {
    position: absolute;
    top: 0;
    left: 0
}
legend span {
    position: absolute;
    left: 0;
    bottom: -60px;
    white-space: nowrap /* or define width */
}

Answer 3

将position: relative放在fieldset上并绝对定位图例：

fieldset {
    border: 2px dotted #333;   
    height: 340px;
    position: relative;
}

fieldset legend {
    position: absolute;
    top: 40px;
    left: 0;
    background: transparent; 
}

更新了小提琴：http://jsfiddle.net/ambiguous/YHhPP/

这对我来说在Gecko和WebKit中呈现的方式相同，原始小提琴在WebKit中有差距，但传说忽略了Gecko中的bottom:-40px。

您也可以尝试浮动图例：http://jsfiddle.net/ambiguous/Gwv4M/1/

fieldset {
    border: 2px dotted #333;   
    height: 340px;
}

fieldset legend {
    float: left;
    margin-top: 40px;
}

但是IE7和IE8似乎也是一个人。

Answer 4

为什么不直接留下图例标记，并使用其他内容作为字段集内的标题。