html - 向字段集元素添加边框时，有没有办法获得完整的边框？

Question

当我向元素添加边框fieldset然后legend向下拖动以用作各种标题时，fieldset仍然存在间隙。

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

例子

CSS

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

js小提琴。

Answer 1

看看这个 jquery fiddle：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 中有差距，但传说忽略了bottom:-40pxGecko 中的。

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

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

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

但是 IE7 和 IE8 似乎也杀死了那个。

Answer 4

为什么不把图例标签放在外面，并在文件集中的标题中使用其他东西。