HTML a标签嵌套图片做跳转按钮时左侧出现下划线如何解决

• 图片左侧的下划线异常，和按钮相邻放置没有任何关系。
• 给a标签设置text-decoration: none后仍存在下划线，本质是a标签与内部img标签之间的换行、缩进会生成空白文本节点，部分浏览器下这类空白节点会继承a标签的文本装饰样式，显示为一截短下划线；另外部分老旧浏览器会默认给带链接的img添加蓝色边框，视觉上也容易和下划线混淆。

任意一种方案都能彻底解决问题：

• 行内样式快速修复：给img设置块级显示属性，同时清除默认边框，兼容全浏览器

<a style="text-decoration:none;" target="_blank" href="你的目标跳转地址">
  <img style="display: block; border: 0;" src="你的图片资源地址">
</a>

原理是把行内属性的img转为块级元素后，空白文本节点不会和图片同处一行，自然不会露出下划线；border:0用于清除老旧浏览器给链接图片默认加的边框。

• 标签写法优化：直接去掉a标签和img之间的所有空白字符，从根源消除会渲染下划线的空白文本节点

<a style="text-decoration:none;" target="_blank" href="你的目标跳转地址"><img src="你的图片资源地址"></a>

这种写法不需要额外写样式，只要把a的开标签、img标签、a的闭标签紧贴书写，不留换行、缩进空格即可。

• 全局样式统一处理：如果项目中有大量图片跳转按钮，可以在全局CSS中添加重置规则，不用逐个写内联样式

/* 清除链接默认下划线 */
a {
  text-decoration: none;
}
/* 清除链接图片默认边框，统一转为块级元素避免空白下划线 */
a img {
  border: none;
  display: block;
}

内容的提问来源于stack exchange，提问作者timemachine11