<fieldset> + <legend> 顶部边框“擦除”行为是否由任何标准(HTML 或 CSS)定义?

jim*_*imp 4 html css fieldset

回到 IE6 时代,我曾经在 HTML 中模拟 Windows 样式的 Group Boxes(参见示例),方法是创建一个div带边框的 a,并将 aspan与边框上的文本定位在一起并使用纯色背景“擦除”框边框。将组文本放置在框的顶部或底部是微不足道的。

在此处输入图片说明

这种技术效果很好,除非背景不是纯色。我意识到<fieldset><legend>标签提供了我所描述的完全相同的行为,除了非固体背景支持,但文只能去的字段集以上。

fieldsetlegend组合似乎奇迹般地这样,无论工作legend触摸将从被删除fieldset边界(实际上从未绘制)。它为什么这样做?从 W3中找到了说明行为的示例,但我在 HTML4/5 规范中找不到任何指示 UA“计算图例的宽度并且不要在那里绘制边框”的内容。这种行为是在任何地方定义的,还是浏览器供应商一致决定应该以这种方式绘制?

如果未定义行为......我想用现代的东西替换旧的 IE6 代码,但我不确定我是否应该使用fieldset(即使除了表单)或一些我不知道的 CSS 功能来擦除边框就像fieldset实现一样。标准提供了什么来fieldset可靠地依赖或模拟它?

Ori*_*iol 5

图例的位置是标准的。HTML5 渲染

fieldset元素的渲染说明,如果有的话,预计要呈现在上边框边缘fieldset元素作为“块”框(覆盖任何显式“显示器”值)。

它没有明确说明图例后面的边框已被擦除,但否则图例将看起来有一个穿线装饰。所以浏览器会擦除边框。