2010-01-13 78 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

相關問題