先定義問題：大家都知道，CSS超鏈接的outline屬性一直是為鍵盤用戶增加易用性的好幫手(按Tab鍵focus下一條鏈接，是除Safari Win外的默認操作)。可以說，outline通常伴隨著:focus事件出現。但如果你重新定義了:focus的樣式，這個邊框就顯得很多余了。

對于標準的瀏覽器而言(IE8+，FF2.0+等)，定義:focus時的outline:0足以解決問題。但不支持:focus的IE6和只支持超鏈接:focus的IE7的黑點邊框又怎么解決呢？

今天花了點時間研究這個問題，最早發現的解決辦法是通過Javascript解決。思路是：既然IE6和7的outline不是標準的outline(無法通過CSS定義)，那肯定有某種JS可以解決。通過這篇Cody Lindley的老文章我們知道hideFocus可以禁用IE的特殊邊框。

link

但這個方式要求每個鏈接都有onfocus屬性，實在不太美觀。Cody Lindley選擇用getElementsByTagName對應添加，這是第一種思路。

在上述文章留言中有一個變種方案：既然只有IE不聽話，我們用CSS Expression替換不就好了？把JS寫入CSS文件，用Conditional Comment避開其他瀏覽器(只有IE支持CSS Expression，但我有潔癖，喜歡避免CSS警告)。

a { outline:expression(hideFocus='true'); }

眾所周知，CSS Expression很耗費資源，若你的頁面上鏈接很多那就更折磨CPU了。因此我們需要一個純CSS的方式，cssplay的Stu Nicholls老頭說純CSS的方式可行，但沒幾個人看懂了他給的神奇例子。各位可以用IE去測試，每塊拼圖都是超鏈接，Tab鍵和右鍵點擊卻不會有黑色邊框。

我花了點時間研究它的CSS，發現原來通過在超鏈接里附加其他inline標簽，通過CSS定位可以做到隱藏IE邊框的效果。

首先是HTML

關于萌番

然后是CSS

a { position:relative; margin:0 48px 0 0; }

a span { position:absolute; top:-1px; left:0; cursor:pointer; white-space:nowrap; }

a:hover { background:transparent; }

a:hover span { background:#1C72B7; height:17px; overflow:hidden; }

a:active { background:transparent; }

a:active span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }

a:focus { background:transparent; }

a:focus span { background:#FFF799; height:17px; overflow:hidden; color:#F4B036; }

基本原理是讓超鏈接完全坍塌，IE的focus邊框就不會顯示了。把文字藏在span標簽中，再絕對定位于鏈接區域里(不理解position的請看這篇文章)，這樣坍塌時文字就不會被隱藏了。加入white-space:nowrap避免文字換行，cursor:pointer模仿鼠標指針，最后定義span為我們希望鏈接顯示的樣式，完成對黑點邊框的回避。

當然純CSS方式也有問題：由于鏈接標簽坍塌，我們沒辦法讓標簽寬度自適應文字長度。為避免文字相互重疊，這里使用margin增加鏈接的寬度，換成display:inline-block與width的組合亦可……對于特定寬度的需求，我暫時想不到任何繞過辦法。

客棧的吹毛求疵到此為止，我可以滿足的休息了。有CSS惡趣味的旅客不妨進一步意淫。

Author: 店長

The Master of BitInnView all posts by 店長

總結

以上是生活随笔為你收集整理的html清理超链接前面的黑点,吹毛求疵：解决IE6-7给链接加黑点边框的三种方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。