刪除Chrome中精靈圖像的邊框

第一次使用這種技術，似乎無論我嘗試分配邊框的屬性都不會在Chrome中消失。其他瀏覽器都很好。我試過大綱：無，邊框：0;還嘗試在圖像周圍添加彩色邊框，並注意到黑色邊框仍然存在於彩色邊框內。似乎不想離開。刪除Chrome中精靈圖像的邊框

變通或建議非常讚賞。

.share-link { 
display: block; 
width: 41px; 
height: 32px; 
text-decoration: none; 
background: url("link-icon.png"); 
} 

.share-link:hover { 
background-position: -41px 0; 
} 


<a title="Share this Link" href="#"><img class="share-link"></a>

來源

2012-02-07 Z with a Z

對不起，但是黑色邊框可能是偶然的圖像本身的一部分？ – kapa 2012-02-07 08:17:30

請給出一個jsfiddle的例子。 – Christoph 2012-02-07 08:18:43

@bazmegakapa正是我的想法，也許圖像小於41x32px ... – Christoph 2012-02-07 08:19:17

這是因爲您使用的img標籤沒有src屬性。 Chrome本質上是指示容器的大小，沒有任何內容。

如果您不想在定位標記之間放置圖像，請不要使用圖像標記。沒有必要在標籤之間放置任何東西。

Demo here.

來源

2012-02-07 08:29:17 Scott

啊..好的。這是有道理的。 – 2012-02-07 08:32:47

+1正是我開始寫的東西。使用'img'或其他具有'background-image'的元素。 [更多關於SO]（http://stackoverflow.com/questions/4335957/using-sprites-with-img-tag/4336431#4336431）。在OP的例子中，應該在'a'上指定'background-image'。 – kapa 2012-02-07 08:33:07

作品完美斯科特。感謝您的信息:)我相信很多人會覺得這很有用。乾杯。 – 2012-02-07 08:40:26

如果你問擺脫激活的onfocus然後邊界：

*:focus {outline: none;}

或

.nohighlight:focus { outline:none; }

這應該擺脫邊框。

來源

2012-02-07 08:20:16

無論焦點如何，都有一個邊框。它保持不變。 – 2012-02-07 08:31:47

這也適用於ie。 – enkor 2013-01-12 10:26:22

這是Chrome錯誤，忽視了「邊界：無;」樣式。

比方說，您有一個尺寸爲102x86像素的圖像「download-button-102x86.png」。在大多數瀏覽器中，您會根據其寬度和高度來預留該尺寸，但無論您做什麼，Chrome都會在其中繪製邊框。

所以你欺騙瀏覽器，以爲裏面空空如也 - 0像素的大小由0像素，但恰好的「填充」適量允許按鈕。這裏是我用來完成此操作的CSS ID塊...

#dlbutn { 
    display:block; 
    width:0px; 
    height:0px; 
    outline:none; 
    padding:43px 51px 43px 51px; 
    margin:0 auto 5px auto; 
    background-image:url(/images/download-button-102x86.png); 
    background-repeat:no-repeat; 
}

Viola！在任何地方都可以使用，並且可以在Chrome中擺脫輪廓/邊框。

來源

2013-02-05 14:15:20

2015年，這仍然完美的Chrome和IE10。謝謝 – BrianLegg 2015-02-22 05:12:48

-2

默認情況下是被包裹在一個鏈接將有圖像周圍的邊框的任何圖像（類似的方式帶下劃線的文字）。卸下邊框很簡單

a image {border: none} or a image {border: 0}

因爲我再也不想看到周圍的圖像鏈接邊框我通常設置上述的每一個網站我開發

來源

2013-07-15 09:17:32

這是格式不正確的CSS。正確的選擇器是'img'而不是'圖像' – Scott 2013-10-25 07:44:36

錯誤的CSS選擇器和錯誤的答案。他的問題不是屬性「border」，而是當沒有''src'''屬性時chrome繪製圖像的「outline」（不是屬性'''outline'''）在上面。 – 2013-12-09 20:58:34

你可以使用一個base64非常小的透明圖像

<img class="share-link" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

來源

2014-10-31 13:35:30 Francesco

簡單，喜歡它， – oCcSking 2015-02-18 16:16:31

我的base64嵌入式圖像保持顯示無論我做什麼它周圍的灰線。使用<div>而不是<img>爲我工作。

BEFORE（錯）我用：

<img class='message-bubble-small'>

在CSS：

img.message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
}

後我用：

在HTML

我ñHTML：

<div id='message-bubble-small'>

在CSS

：

#message-bubble-small { 
    background-image: url(data:image/png;base64,...); 
    background-size: 16px 16px; 
    width: 16px; 
    height: 16px; 
    float: left; 
}

隨着最後一個例子，我有在Chrome中沒有更多的灰線。

來源

2017-12-05 16:21:48

刪除Chrome中精靈圖像的邊框

回答

相關問題