Question

使用Visual Studio代码，以下在版本5中简单嵌入FA图标会在浏览器中产生非常小的下划线伪影。

ifelse()

关闭<a href="#"><i class="fab fa-twitter"></i> </a>标记之前的单个空格是罪魁祸首。一个明显的解决方案是不使用空间！但是，如果使用代码编辑器，代码格式化将不可避免地产生大量的空白区域，尽管浏览器将其缩小到单个空白区域，但不可避免地会出现这些空白区域。

我唯一的解决方案是使用合适的CSS选择器来防止下划线出现。

有人可以提出别的建议吗？

Answer 1

这绝对不是你的编辑器奇怪的格式化，它是嵌入在一个元素中并且是默认样式时浏览器呈现锚点的方式。默认样式为：

a {
  text-decoration: underline; 
  display: inline
}

如果覆盖这些属性中的任何一个，则不应该看到这些工件。任何这些特定样式都将解决问题：

a {
  display: inline-block; /* or block */
  text-decoration: none
}

在以下演示中，单击前3个图标以在样式之间切换。

演示

#bk:target {
  display: block
}

#ib:target {
  display: inline-block
}

#td:target {
  text-decoration: none
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Artifact</title>
  <meta name="viewport" content="width=960">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css">
</head>

<body>

  <p>Observe the small artefacts in the first 3 icons when formatted...</p>

  <a href="#bk" id='bk'>
    <i class="fab fa-twitter fa-5x"></i>
  </a>
  <a href="#ib" id='ib'>
    <i class="fab fa-facebook-f fa-5x"></i>
  </a>
  <a href="#td" id='td'>
    <i class="fab fa-pinterest fa-5x"></i>
  </a>

  <p>...and none in the next three.</p>

  <a href="#"><i class="fab fa-twitter fa-5x"></i></a>
  <a href="#"><i class="fab fa-facebook-f fa-5x"></i></a>
  <a href="#"><i class="fab fa-pinterest fa-5x"></i></a>

  <p>The first set of 3 icons are modified to demonstrate that the 3 CSS properties can fix the artifacts. Simply click any of first 3 icons and observe the removal of that particular artifact. The links are using the `:target` pseudo-class for this interaction
    so all three behave as if only one of them can be active at a time (like a group of identically named radio buttons.)</p>

</body>

</html>

将FontAwesome图标添加到链接会产生工件

1 个答案:

演示