黑線

Question

我有這樣的小提琴：http://jsfiddle.net/wtw7ebkr/1/

HTML：

<div id="navsocial"> 
    <a href="https://www.facebook.com/" target="_blank"> 
     <img src="http://i.imgur.com/gIVEWHc.png" /> 
    </a> 
    <a href="https://twitter.com/" target="_blank"> 
     <img src="http://i.imgur.com/sUEWyjj.png" /> 
    </a> 
    <a href="https://plus.google.com/" target="_blank"> 
     <img src="http://i.imgur.com/GT4Unbz.png" /> 
    </a> 
</div> 

CSS：

#navsocial { 
    position: absolute; 
    right: 20px; 
    top: 5px; 
} 

#navsocial img { 
    width: 40px; 
    height: 40px; 
} 

在Chrome和Firefox，它顯示的Facebook之間2條黑線和twitter，以及twitter和gplus圖標。

1. 爲什麼那些線？

2. 我該如何擺脫它們？什麼我看到

截圖：http://i.imgur.com/xDKMmxc.png

Answer 1

的線是有，因爲超鏈接的錨，通過a在HTML中表示，在默認情況下

您需要申請text-decoration: none;到a錨下劃線

#navsocial a { 
    text-decoration: none; 
} 

Fiddle