如何去除网站图片下方的蓝色链接下划线？（HTML/CSS开发）

我来帮你搞定这个烦人的蓝色下划线问题！你之前尝试的text-decoration: none;和border: none;没生效，大概率是因为没把样式加对地方——下划线其实是来自包裹图片的<a>标签，不是图片本身哦。

下面给你几个针对性的解决方案，按顺序试就行：

1. 直接给链接标签去掉下划线 #

这是最核心的一步，把样式加到包含图片的<a>元素上：

.socialmediawidgets a {
  /* 移除链接的默认下划线 */
  text-decoration: none;
}

2. 额外移除可能的底部边框 #

如果你的CSS里给<a>标签加过底部边框，也会看起来像下划线，一起去掉：

.socialmediawidgets a {
  text-decoration: none;
  /* 确保没有底部边框样式 */
  border-bottom: none;
}

3. 解决图片基线对齐导致的“伪下划线” #

有时候图片下方会有一小段空隙（因为图片是inline元素，默认和文本基线对齐），虽然不是蓝色，但如果刚好和链接样式叠加也会很烦人，加上这个样式就能解决：

.socialmediawidgets img {
  /* 让图片脱离inline布局，避免基线空隙 */
  display: inline-block;
  vertical-align: middle;
}

完整代码示例 #

结合你的HTML结构，最终的代码大概是这样：

HTML #

<div>
  <div class="socialmediawidgets">
    <a href="https://twitter.com/your-profile">
      <img title="Twitter" alt="Twitter" src="https://social...">
    </a>
    <!-- 其他社交图标链接 -->
  </div>
</div>

CSS #

.socialmediawidgets a {
  text-decoration: none;
  border-bottom: none;
}

.socialmediawidgets img {
  display: inline-block;
  vertical-align: middle;
}

内容的提问来源于stack exchange，提问作者Pieter van zyl