Xóa đường viền xung quanh hình ảnh sprite trong Chrome

Question

Lần đầu tiên sử dụng kỹ thuật này, dường như bất kể thuộc tính nào tôi cố gắng gán đường viền sẽ không biến mất trong Chrome. Các trình duyệt khác là tốt. Tôi đã thử phác thảo: none, border: 0; v.v. Ngoài ra, đã thử thêm một đường viền màu xung quanh hình ảnh, và nhận thấy đường viền màu đen vẫn nằm trong đường viền màu. Dường như không muốn đi xa.

Lời khuyên hoặc lời khuyên của công việc được đánh giá cao.

.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> 

Answer 1

Đó là vì bạn đang sử dụng thẻ img không có thuộc tính src. Chrome chủ yếu cho biết kích thước của vùng chứa không có gì trong đó.

Nếu bạn không muốn đặt hình ảnh giữa các thẻ neo, thì không sử dụng thẻ hình ảnh. Không cần đặt bất kỳ thứ gì giữa các thẻ.

Demo here.

Answer 2

Nếu bạn yêu cầu để thoát khỏi biên giới mà kích hoạt onfocus thì:

*:focus {outline: none;} 

hoặc

.nohighlight:focus { outline:none; } 

này nên thoát khỏi biên giới.

Answer 3

Đó là lỗi của Chrome, bỏ qua "border: none;" Phong cách.

Giả sử bạn có hình ảnh "download-button-102x86.png" có kích thước 102x86 pixel. Trong hầu hết các trình duyệt, bạn sẽ đặt kích thước đó cho chiều rộng và chiều cao của nó, nhưng Chrome chỉ vẽ một đường viền ở đó, bất kể bạn làm gì.

Vì vậy, bạn lừa Chrome nghĩ rằng không có gì ở đó - kích thước 0px x 0px, nhưng với số lượng chính xác "đệm" để cho phép nút. Đây là khối id CSS mà tôi đang sử dụng để thực hiện việc này ...

#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! Hoạt động ở mọi nơi và loại bỏ đường viền/đường viền trong Chrome.

Answer 4

Theo mặc định, bất kỳ hình ảnh nào được bao bọc trong liên kết sẽ có đường viền xung quanh hình ảnh (tương tự như cách văn bản được gạch dưới). Loại bỏ biên giới là đơn giản

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

Vì tôi không bao giờ muốn nhìn thấy đường viền quanh ảnh liên kết hình ảnh tôi thường được thiết lập ở trên trên tất cả các trang web tôi phát triển

Answer 5

bạn có thể sử dụng một base64 rất nhỏ hình ảnh trong suốt

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

Answer 6

Hình ảnh nhúng base64 của tôi tiếp tục hiển thị một đường màu xám xung quanh nó bất kể tôi đã làm gì. Sử dụng <div> thay vì <img> đã làm việc cho tôi.

TRƯỚC (sai) Tôi sử dụng:

trong HTML:

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

trong CSS:

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

SAU tôi đã sử dụng:

i n HTML:

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

trong CSS:

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

Với ví dụ cuối cùng tôi có những dòng không có màu xám hơn trong Chrome.