iT邦幫忙

2021 iThome 鐵人賽

DAY 15
2
自我挑戰組

前進切版之路! CSS微體驗系列 第 15

【踩坑】為什麼a標籤沒有包住我要的範圍!?

前幾天看了落落長的grid使用
相信應該有一滴滴的概念了

今天來輕鬆一下~
看看我幹過的蠢事⊙▽⊙ 搏君一笑~~

<a>標籤的使用

<a>是用作超連結使用,透過 href 連結到其他地方

<!-- 相對連結 -->
<a href="/css/style.css">相對連結</a>

<!-- 絕對連結 -->
<a href="https://ithelp.ithome.com.tw/users/20140586/ironman">絕對連結</a>

測試的時候為了避免跳來跳過去會在href裡面放入"#" 或是 "javescript:;"

實作上

平時我們希望可以點擊圖片連結到其他部分時,可以用<a>標籤包住<img>

<a href="#">
    <img src="aaa.jpg" alt="aaa">
</a>

但某天我遇到<a>標籤沒有包住我要的範圍


結構大概是這樣的(簡化)

我想用<a>包住覆蓋在圖片上的文字層,讓滑鼠接觸到時可以跳轉以外還可以做出效果

<a href="#" class="photo-link">
    <a>CULTURE</a>
    <h2>Biotech Stocks</h2>
    <div>  
</a>

但瀏覽器幫我改成了

<a href="#" class="photo-link"> </a>
    <a>CULTURE</a>
    <h2>Biotech Stocks</h2>
    <div>  

導致文字的位置大大偏移!!!

查了一下文件後發現
雖然<a>標籤可以包住divpspan...等element
但遇到<a>時,HTML5就會進行修正(自動幫你結尾),導致結構亂掉

HTML5修正

在W3C的規範裡面說

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g., buttons or other links).

意思就是<a>標籤裡面不能有按鈕或是其他連結
https://www.w3.org/TR/2011/WD-html5-author-20110809/the-a-element.html

這個時候把裡面的<a>拿掉就可以正常運作囉~

<a href="#" class="photo-link">
    <span >CULTURE</span>
    <h2>Biotech Stockst</h2>
    <div>  
</a>

昨天打完AZ今天全身散光光 _(´ཀ`」 ∠)


上一篇
【心得】你今天種菜了嗎? grid之路-grid的使用(6)
下一篇
【心得】我就是要跟別人不一樣!!List 清單樣式變變變~
系列文
前進切版之路! CSS微體驗30

尚未有邦友留言

立即登入留言