锚标记破折号悬停

Question

我一直看到一个有趣的冲刺在锚徘徊。我认为它主要是在有图像的时候。它不是我可以通过文本修饰来修复的标准下划线：无;

我一直在用rgba（0,0,0,0）修复它，但我想知道是否有更好的方法，所以我做了一次到整个网站（因为我显然不想要文本锚点必须着色）

这是我的例子，虽然它不仅限于这个网站 http://weinberg-michael.sesamehub.com/kenosha-office-tour

社交图标有这个问题

Answer 1

您可以使用font-size: 0;来解决此问题。问题是在inline元素中嵌套标记时的空白区域。您看到开头<a>的结尾与<img>标记的开头之间的空格。

以下是另一种解决方案：

<a href="#"><!--
  --><img src="myImg.jpg" /><!--
--></a>

此外，a元素的悬停规则也有text-decoration下划线。删除它将保留white-space内容，但不显示下划线。