html - 绝对定位图像之间的黑线

Question

我有这个 fiddle :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 以及 twitter 和 gplus 图标之间显示 2 条黑线。

1. 为什么会有这些线？

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

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

Answer 1

之所以有这些线，是因为超链接 anchor 在 HTML 中由 a 表示，默认情况下带有下划线

您需要将 text-decoration: none; 应用到 a anchor

#navsocial a {
    text-decoration: none;
}

Fiddle