绝对定位图像之间的黑线

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和twitter之间显示2条黑线，以及twitter和gplus图标。

1. 为什么那些线？

2. 我怎样才能摆脱它们？

我看到的屏幕截图：http://i.imgur.com/xDKMmxc.png

Answer 1

这些行是因为超链接锚点（用HTML a表示）默认情况下有下划线

您需要将text-decoration: none;应用于a锚点

#navsocial a {
    text-decoration: none;
}

Fiddle