2014-05-07 36 views
1

我正在處理一個應用程序,該應用程序通過將包含錨點標記的列表以及每個選項卡的內容包裝到容器中,將其列入可點擊選項卡列表。這裏是列表,供參考。該代碼輸出以下圖像。第二張圖片是我點擊非默認選項卡(即貸款)後在Chrome中發生的一個示例。Chrome中的錨定標記Active Effect?

我相信Chrome會將這個藍色邊框生成爲錨點標記的某種活動效果,因爲如果我按任意鍵或點擊按鈕,它將被刪除。藍色邊框也不會出現在Internet Explorer 10中。我還沒有測試過其他瀏覽器。

有什麼辦法可以防止這個邊界出現在第一個地方?我幾乎肯定它是由webkit以某種方式生成的,但是我不太瞭解它,也不太瞭解它的文檔。

<ul> 
    <li><a href="#Borrowers">Borrowers</a></li> 
     <li><a href="#Loans">Loans</a></li> 
    <li><a href="#Organizations">Funding Sources</a></li> 
    <li><a href="#Users">Users</a></li> 
    </ul> 

Images Illustrating Before and After Click

回答

6

該邊框顯示顯示焦點。添加以下CSS代碼片段以從所有元素中刪除焦點輪廓。

*:focus {outline: 0;}

如果你不想消除所有元素的焦點輪廓而只是你的標籤列表中添加以下內容。

li:focus{outline: 0;}

很快做出了小提琴作爲一個例子。

看樣with focus outline和樣品without focus outline

+0

謝謝你我的男人。很好的解釋。還有什麼我應該知道的其他瀏覽器,或大綱屬性適用於絕大多數的市場份額? – Synesthesia