css - CSS 生成的图标之间的毛发不明

Question

我将这些图标创建为图像，并在其后面包裹了一个 CSS 圆圈。然而，这一随意的头发看起来像是源于 CSS。

任何解释为什么？抱歉，CSS 都是内联的 - 这是用于 html 电子邮件:

<div style="width: 180px; text-align: center;margin: 0 auto;">
<a href="http://pinterest.com/houseplansdan/">
<li style="list-style: none; background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block;margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_pinterest.png" href="http://pinterest.com/houseplansdan/">
</li>
</a>    

<a href="http://www.facebook.com/pages/Houseplans/91152065546">
<li style="background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block; margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_facebook.png">
</li>
</a>    

<a href="http://twitter.com/houseplans_">
<li style="list-style: none; background-color: #505050; width: 40px;height: 40px;border-radius: 20px; display: inline-block;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_twitter.png">
</li>
</a>  
</div>​

fiddle 版 here .

Answer 1

那不是头发，它是 text-decoration - 链接的默认样式。将此应用于您不想拥有它的任何链接:

​a { text-decoration:none; }​

虽然这可能很乏味，但您应该可以毫无问题地为您的电子邮件执行此操作。