Entfernen Sie die dünne Linie in Header-Bildern in Bootstrap

Question

Ich habe grundlegenden Code mit Bootstrap und einem Svg Sprit in einer Kopfzeile/Menü .. und es gibt eine dünne graue Hintergrundlinie in den Symbolen.

http://codepen.io/anon/pen/dpzKoQ?editors=1100

können Sie bitte helfen. Ich habe versucht

border- * usw. auf 0 zu setzen - und ich kann reparieren. Ich stelle die Farben/Hintergründe ein - aber irgendwo fehlt mir etwas.

einiger Ort wird den unten stehenden Wert von normalize.less bekommen

border-image-Breite: 1;

code: bitte siehe codepen.

.icon { 
    display: inline-block; 
    background-repeat: no-repeat; 
    background-image: url(https://cdn.rawgit.com/srisitar/test/master/sprite.svg); 
} 

.icon-facebook { 
    width: 96px; 
    height: 96px; 
    background-position: 0 0; 
} 

.icon-twitter { 
    width: 96px; 
    height: 96px; 
    background-position: -128px 0; 
} 

<

div id="home"> 
     <a href=" "> 
        <img class="icon icon-twitter"></a> 
               </div> 

wie die graue Linie entfernen Sie.

dank

Answer 1

Es ist, weil Sie einen img Tag ohne src Attribut verwenden. Chrome zeigt im Wesentlichen die Größe des Containers an, in dem nichts enthalten ist.

Wenn Sie kein Bild zwischen den Anchor-Tags platzieren möchten, verwenden Sie kein Image-Tag. Es ist nicht notwendig, etwas zwischen den Tags zu platzieren.

Demo here.

Answer 2

Sie können div-Tag mit background-image in css anstelle img Tag zu verwenden.