html - 为什么当我将图像设为链接时，它会在其右侧创建一条小黑线？

Question

为什么当我将图片设为链接时，它会在其右侧创建一条小黑线？

Answer 1

这是两件事的结合。您的 anchor 有下划线，您的标记有空格。例如，您的 HTML 可能看起来类似于:

<a href="http://google.com">
  <img src="http://lorempixel.com/100/100" />
</a>

那个格式很好的空间包含被渲染的空白字符(然后，从 anchor 上划线)。请注意，其他一些答案可能会使用 text-decoration:none; 删除下划线，但实际上您的图像旁边仍有一个由空白引起的小空间，如果您正在尝试实现“像素完美”渲染。要解决它，请删除 anchor 标记之间的空格或将字体大小设置为 0:

Html 修复(更好):

<a href="http://google.com"><img src="http://lorempixel.com/100/100" /></a>

或者，一个 css 修复:

a {
  /* Of course You'll want to better target this, since you won't want all anchors to be font-size:0 */
  font-size:0; /* Now that the font size is zero, whitespace won't show. */
  text0decoration:none; /* If you want to add this, you can, for good measure */
}

注意:css 修复的一个警告是一些较旧的浏览器会忽略 0 的字体大小。