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>​

小提琴版here。

Answer 1

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

​a { text-decoration:none; }​

您的电子邮件内联应该没有问题，尽管这可能很乏味。

Answer 2

LI内不能有A。如果可能，请更正。

此外， CSS 将修复：

a { text-decoration: none; }​

更新了小提琴：http://jsfiddle.net/pHksF/2/