span和label标签之间的渲染区别是什么？

Question

11

我理解span标签和label标签之间的功能区别......但似乎它们在渲染方面也存在不同，我无法弄清楚这是什么？有人知道span和label之间的渲染差异吗？谢谢

- Polaris878

看起来有一些 CSS 在作用，我可能错过了...所以在兼容的浏览器中可能真的没有渲染差异。 - Polaris878

2个回答

7

我在IE、Firefox、Opera或Chrome中未看到任何渲染差异。虽然可能会有浏览器选择不同的渲染方式，但这不太可能有显著的差异。

标签的主要优势是可以通过包含关系或for属性将其与另一个表单控件相关联。这可以具有较好的可访问性。特别是在典型的基于图形的浏览器中，您可以单击标签来聚焦相关控件（对于复选框/单选按钮，还可以选中它，这很方便，因为否则它是一个很小的目标）。这可以重现已建立的操作系统表单窗口小部件行为。

- bobince

测试用例。这里没有任何区别；您是否有其他干扰规则？Firefox 3.5默认样式表中唯一适用于“label”的规则是“cursor：default”。 - bobince

1

糟糕...我正在搜索我们大量的CSS文件，发现有一个类覆盖了默认标签属性。抱歉。 - Polaris878

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Parrots · Accepted Answer

除了默认的呈现样式（在某些浏览器中标签有时会加粗），重要的区别是标签应该链接到表单字段（输入、选择等）以LABEL该字段。因此它有“for”属性。它不应该用于其他任何目的。这对于屏幕阅读器的可访问性非常重要，因为他们期望存在这种链接。

Span用于一组文本，您想将类似的样式应用于该组文本。默认情况下，Span没有应用任何样式。

附：如果我发现你只是为了使一些文本加粗而使用标签选项卡，那么格雷斯库尔的愤怒就会找到你。请跟着我说：“没有输入字段，没有标签”。

PPS：抱歉，这是我对其他人的标记最大的恼人之一。