web-dev-qa-db-ja.com

Chromeのスプライト画像の周囲の境界線を削除します

この手法を初めて使用した場合、どの属性に境界線を割り当てようとしても、Chromeでは消えないようです。他のブラウザでも問題ありません。私はoutline：none、border：0;を試しました。などなど。また、画像の周囲に色付きの境界線を追加しようとしましたが、色付きの境界線内に黒い境界線がまだ残っていることに気付きました。立ち去りたくないようです。

回避策やアドバイスをいただければ幸いです。

.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>
cssimagegoogle-chromebordersprite
20
Z with a Z

これは、img属性のないsrcタグを使用しているためです。 Chromeは基本的に、何も入っていないコンテナのサイズを示しています。

アンカータグの間に画像を配置したくない場合は、画像タグを使用しないでください。タグの間に何も配置する必要はありません。

デモはこちら

39
Scott

base64の非常に小さな透明な画像を使用できます

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

これはChromeバグであり、「border：none;」スタイルを無視します。

サイズが102x86ピクセルの画像「download-button-102x86.png」があるとします。ほとんどのブラウザでは、幅と高さのためにそのサイズを予約しますが、Chromeは、何をしても、そこに境界線を描画するだけです。

だからあなたはChromeそこには何もないと思い込ませます-0px×0pxのサイズですが、ボタンを許可するために正確に適切な量の「パディング」があります。これはCSSIDブロックです。私はこれを達成するために使用しています...

#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;
}

ビオラ！どこでも機能し、Chromeのアウトライン/境界線を取り除きます。

3
Randy King

オンフォーカスをアクティブにする境界線を取り除くように求めている場合は、次のようにします。

*:focus {outline: none;}

または

.nohighlight:focus  {  outline:none;  }

これは境界線を取り除く必要があります。

1
Sebastian Graz

境界線をフェードさせる「src」属性を空白にすることができます

<img class="share-link" src="">
0
Matheus Gomes

Base64で埋め込まれた画像は、何をしても周囲に灰色の線が表示され続けました。 <div>の代わりに<img>を使用するとうまくいきました。

[〜＃〜] before [〜＃〜]（間違った）使用した：

hTMLの場合：

<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;
}

[〜＃〜] after [〜＃〜]使用したもの：

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に灰色の線はもうありません。

0
D-J