CSSスプライトを使用しているときにボーダーレンダリング

CSSスプライトを使用してページ上のHTTPリクエスト数を減らそうとしています。これらの画像を境界線なしでレンダリングします。あなたが見ることができるように、すべて、CSSスプライトを使用しているときにボーダーレンダリング

：私は私が正しくCSSを設定している、まだ私は（：Googleロゴが意図的にクリップされ注）以下の問題をレンダリング経験しています言うことができる最善のよう

ブラウザはまだ境界線を描画します。また、IEとFireFoxは 'broken link'タイプのアイコンもレンダリングします。

この例で使用されるHTMLは次のとおりです。

<html> 
    <head> 
    <style> 
     img {border:none} 
     img.css_sprite { background:url("http://www.google.com/images/nav_logo29.png") -20px -10px; height:24px; width:100px; border:none;} 
    </style> 
    </head> 
    <body> 
    <img class="css_sprite"/> 
    </body> 
</html>

誰も私が間違ってここにやっているものを私に伝えることができますか？私はそれが何か単純でなければならないと確信しています。前もって感謝します。

出典

2011-02-06 Chris Lacy

要するに、このサイト（http://validator.w3.org/）にアクセスする必要があります。 – reisio

国境はこれに属する：

<img class="css_sprite"/>

それが欠けている画像のために、ブラウザによって描かれたボーダーです。ここではsrcを指定していないので、ブラウザが枠線と欠けている画像グラフィックを追加します。

imgを代わりにdivまたはspanのような他の要素に変更してください。

出典

2011-02-06 03:03:44 BoltClock

私は優れた解決策を見つけただけで、src要素内に空の透明な画像（好ましくは1x1 png）を入れました。画像が透明であるため、srcは空白にならず、目的が解決されます...

出典

2014-02-13 11:16:07 sankha

ボーダーなしでOPディスプレイ 'nav_logo29'にどのように役立ちますか？ –

CSSスプライトを使用しているときにボーダーレンダリング

答えて

関連する問題