2010-01-13 132 views
10

所以我理解span和label标签之间的功能差别......但是它似乎也存在标签之间的渲染差异,我似乎无法弄清楚它是什么?有谁知道跨度和标签之间的渲染差异?谢谢跨度和标签标记之间的差异是什么?

+0

这似乎有一些CSS作用于它,我错过了......所以有可能真的是不兼容的浏览器 – Polaris878 2010-01-13 20:18:39

回答

26

除了默认的渲染样式(某些浏览器中的标签有时是粗体),最主要的区别是它应该将一个标签连接到一个表单字段(输入,选择等)给LABEL这个字段是什么。因此它是“for”属性。它不应该用于除此之外的任何事情。这对于屏幕阅读器的可访问性来说尤其重要,因为他们希望这个链接存在。

跨度适用于您想要应用类似样式的一组文本。默认跨度没有适用于它的样式。

PS:格拉斯库尔的愤怒可能会发现你,如果我曾经抓到你使用标签选项卡只是为了使一些文本粗体或类似的东西。在我之后重复:“没有输入字段,没有标签”。

PPS:对不起,这是我与其他人的标记最大的烦恼之一。

+0

*“在某些浏览器中,标签有时为粗体”*。你能否详细说明浏览器标签是粗体的? – 2017-01-09 18:17:43

7

我可以看到与IE,Firefox,Opera或Chrome的默认样式表没有任何渲染差异。浏览器可能会选择以不同的方式渲染它,但这不太可能是一个重大的区别。

标签的主要优点是可以将其与另一个表单控件关联(通过包含或for属性)。这可以具有可访问性优点。值得注意的是,在典型的基于图形的浏览器中,您可以单击标签以关注相关控件(并勾选它,对于复选框/收音机,这很方便,因为否则它只是一个很小的目标)。这再现了已建立的OS窗体小部件行为。

+0

,除了有在Firefox的差异... – Polaris878 2010-01-13 20:15:02

+0

测试案例则呈现差异。这里没有区别;你有其他规则是否有干扰?唯一适用于Firefox 3.5默认样式表中'label'的规则是'cursor:default'。 – bobince 2010-01-13 20:17:30

+1

drat ....所以我正在挖掘我们大量的CSS,并且有一个类覆盖默认标签属性。对不起这个。 – Polaris878 2010-01-13 20:17:58

相关问题