武林網(www.vevb.com)文章簡介:Web 標準中處處充滿了打臉行為,這條規則現在已經失效了!在那篇文章發布一個月後,HTML5doctor 發表了“Block-level” links in HTML5,引述一下,就是原先你要這麼寫.
英文叫做Block-level links,我以為只有我廠那些鳥毛不知道,沒想到不知道的還挺多,需要普及一下。
很遺憾,Web 標準中處處充滿了打臉行為,這條規則現在已經失效了!在那篇文章發布一個月後,HTML5doctor 發表了Block-level links in HTML5,引述一下,就是原先你要這麼寫:
<div class=story>
<h3><a href=story1.html>Bruce Lawson voted sexiest man on Earth</a></h3>
<p><a href=story1.html><img src=bruce.jpg alt=full story. />A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</a></p>
<p><a href=story1.html>Read more</a></p>
</div>
現在HTML5 中可以這麼寫
<article>
<a href=story1.html>
<h3>Bruce Lawson voted sexiest man on Earth</h3>
<p><img src=bruce.jpg alt=gorgeous lovebundle. >A congress representing all the planet's women unanimously voted Bruce Lawson as sexiest man alive.</p>
<p>Read more</p>
</a>
</article>
從無障礙角度考慮僅僅增加了圖片的alt 描述文字(為讀屏用戶提供更詳細的信息),而不需人為的製造辣麼多個冗餘的a! HTML5 的思想中的一條就是務實,用現在的話說就是接地氣,嗯哼~
雖然這種寫法不向前兼容,但經過HTML5 doctor 的測試表明,主流瀏覽器都支持,也就是說:
你和你的小伙伴們現在就可以在項目中使用啦!
為了兼容IE6/7 的手型bug,需要在reset.css 中加入諸如這樣的代碼:
1 a div, a h3, ap, ...{#cursor:hand}