Remove border around sprite image in Chrome Remove border around sprite image in Chrome google-chrome google-chrome

Remove border around sprite image in Chrome


It's because you are using an img tag with no src attribute. Chrome is essentially indicating the size of the container with nothing in it.

If you don't want to place an image between the anchor tags, then don't use an image tag. It's not necessary to place anything between the tags.

Demo here.


you can use a base64 very small transparent image

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


It's a Chrome bug, ignoring the "border:none;" style.

Let's say you have an image "download-button-102x86.png" which is 102x86 pixels in size. In most browsers, you would reserve that size for its width and height, but Chrome just paints a border there, no matter what you do.

So you trick Chrome into thinking that there is nothing there - size of 0px by 0px, but with exactly the right amount of "padding" to allow for the button. Here is a CSS id block that I am using to accomplish this...

#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! Works everywhere and gets rid of the outline/border in Chrome.