<legend> 标签接受内联宽度答案

【问题标题】：<legend> tag accepts width if inline<legend> 标签接受内联宽度
【发布时间】：2015-03-19 20:13:08
【问题描述】：

当我将以下样式应用于图例标签时

display: inline;
width: 300px;

我看到图例标签的宽度为300px 它仍然接受宽度。 Here 是一个演示。这个元素有什么特别之处吗，因为我希望内联元素忽略width 设置！

【问题讨论】：

宽度实际上并不影响元素的宽度，在调试器中增加它你会发现什么都没有发生
@Huangism Chrome 中宽度增加
好吧，它不在 FF 中
打开开发工具，查看<legend>的计算样式。它忽略了您的“显示”样式，仍然呈现为display: block; 我正在使用 chrome。
显然legend标签在webkit浏览器中还有其他问题stackoverflow.com/questions/5339161/legend-tag-and-chrome

标签： html css

【解决方案1】：

这可能是类似于button 元素的情况，如Bindings 中所述：

10.5.2 - The button element
@namespace url(http://www.w3.org/1999/xhtml);
button { binding: button; }
当 button 绑定应用于 button 元素时，元素应呈现为“内联块”框，呈现为按钮，其内容是元素的内容。

Chrome 似乎对 legend 元素也是如此。

但它可能不应该那样做，因为

规范没有为legend 元素定义这种绑定。
legend 元素不应被替换元素（它们是 Non-replaced elements 部分中的 listed），因此它们应符合 CSS 规则。

【讨论】：