如何刪除超鏈接圖像的輪廓？

當我們使用文本替換使用CSS並給出一個負測試縮進，即text-indent:-9999px。然後，當我們點擊該鏈接時，虛線出現在下面的示例圖像中。這有什麼解決方案？如何刪除超鏈接圖像的輪廓？

2009-05-02 Wasim Shaikh

請不要刪除它，它是爲了可訪問性。 – 2012-01-18 08:03:20

+13

http://outlinenone.com/ – 2012-01-18 08:05:30

Duplicate：http://stackoverflow.com/questions/1142819/how-to-remove-dotted-border-around-active-hyperlinks-in-ie8-with-css *（但請參閱上面的輔助功能註釋！）* – JohnB 2012-06-07 22:47:47

126

對於刪除大綱錨標記

a {outline : none;}

從圖像鏈接刪除輪廓

a img {outline : none;}

取下圖像鏈接

img {border : 0;}

來源

2011-02-14 16:25:24 Discover

您可以在定位元素上使用CSS屬性「無」的「綱要」和值。

a { 
outline: none; 
}

希望有幫助。

來源

2009-05-02 07:47:06

請參閱問題的評論。 – 2012-01-18 08:05:49

-moz-user-focus: ignore;基於Gecko的瀏覽器（您可能需要！重要的是，這取決於它如何應用）

來源

2009-05-02 07:58:41 Anonymous

-9

是的，我們可以使用。 CSS重置爲a {outline:none}也

a:focus, a:active {outline:none} 在重置CSS的最佳實踐，最好的辦法是使用普通:focus{outline:none}如果您仍然有最好的選擇，請與我們分享

來源

2009-05-02 08:15:03

+20

難道不接受其他答案之一，其內容導致你得出你的結論嗎？ – 2010-08-21 14:27:25

有一個在相同的邊框效果Firefox和Internet Explorer（IE），當您點擊某個鏈接時，它變得可見。

該代碼將修復只是IE：

a:active { outline: none; }.

而這一次將修復Firefox和IE：

:active, :focus { outline: none; -moz-outline-style: none; }

末代碼應該添加到您的樣式表，如果您想從您的網站刪除鏈接邊框。

來源

2009-05-02 13:42:46 Mike

感謝邁克，這一個是真的很好的答案。但使用-moz-outline-style：none;不是有效的CSS。仍然這是一個好選擇 – 2009-05-03 17:05:09

請注意，重點風格是有原因的：如果你決定刪除它們，通過鍵盤導航的人不會知道什麼焦點了，所以你傷害了你的網站的可訪問性。

（保持他們在的地方還可以幫助電力用戶不喜歡用自己的鼠標）

來源

2009-05-02 22:52:06 Wolfr

我們不刪除：焦點風格。只是增加風格大綱：沒有。其他默認樣式將在那裏。 – 2009-05-03 17:06:18

你可以把overflow:hidden到與文本縮進，而虛線的財產，跨越了頁，會消失。

我見過幾篇關於刪除輪廓的帖子。這樣做時要小心，因爲可能會降低網站的可訪問性。

a:active { outline: none; }

我個人會用這個屬性只，彷彿:hover屬性具有相同的CSS屬性它會阻止顯示了誰正在使用鍵盤導航人的輪廓。

希望這可以解決您的問題。

來源

2009-07-31 03:54:07

邊界對於Internet Explorer 9：

來源：http://social.msdn.microsoft.com/Forums/en-HK/ieextensiondevelopment/thread/1023adfd-bd73-47ac-ba9c-2bad19ac583a

來源

2012-01-25 07:20:35

我敢打賭大多數用戶都沒有使用鍵盤作爲導航控件的用戶類型。惹惱大多數用戶是否喜歡使用鍵盤導航？簡短的答案 - 取決於你的用戶是誰。

另外，我沒有在Firefox和Safari中以相同的方式看到這種體驗。所以這個觀點似乎主要針對IE。這一切都取決於您的用戶羣和知識水平 - 他們如何使用該網站。

如果你真的想知道你在哪裏，你是一個鍵盤用戶，你可以隨時通過網站鍵入狀態欄。

來源

2012-05-14 20:17:10 Dwall

這完全適用於我

a img {border:none;}

來源

2013-02-26 10:05:01

包括在樣式表的代碼

img {border : 0;} 

a img {outline : none;}

來源

2013-08-22 06:25:14

使用這樣的HTML 4.01

<img src="image.gif" border="0">

來源

2013-11-24 14:59:49 151291

任何影像有一個鏈接將在圖像周圍有一個邊框可以幫助指示它與舊版瀏覽器的鏈接。將邊框=「0」添加到IMG HTML標記將防止該圖片在圖像周圍有邊框。

但是，添加邊框=「0」到每一個形象將不僅耗時也會增加文件大小和下載時間。如果您不希望任何圖像具有邊框，請創建一個包含下面代碼的CSS規則或CSS文件。

img {border-style：none; }

來源

2014-02-17 06:21:18

我希望這是你們中的一些有用的，它可以被用來從鏈接，圖像和Flash和MSIE 9刪除輪廓：

a, a:hover, a:active, a:focus, a img, object, embed { 
    outline: none; 
    ie-dummy: expression(this.hideFocus=true); /* MSIE - Microsoft Internet Explorer 9 remove outline */ 
    }

下面的代碼是能夠隱藏圖像邊界：

img { 
    border: 0; 
    }

如果你想支持Firefox 3.6.8，但不支持Firefox 4 ...點擊下對輸入型=圖像可以產生虛線輪廓爲好，將其刪除舊版本的Firefox下面將做的伎倆：

input::-moz-focus-inner { 
    border: 0; 
    }

IE 9不能在某些情況下允許移除圍繞鏈接虛線輪廓，除非你有之間，並在頁面此meta標籤：

 <meta http-equiv="X-UA-Compatible" content="IE=9" />

來源

2014-05-26 13:09:47 jagb

這是爲了在谷歌瀏覽器

:link:focus, :visited:focus {outline: none;}

來源

2015-12-01 16:02:26

工程Removi最新的一個ng你可以在你的css文件中寫入虛線輪廓href鏈接：

a { 
    outline: 0; 
}

來源

2016-05-31 07:56:43

如何刪除超鏈接圖像的輪廓？

回答

相關問題