0

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

<a href="#"><i class="fab fa-twitter"></i> </a>

</a>结束标记之前的单个空格是罪魁祸首。一个明显的解决方案是不使用空格！但是，如果使用代码编辑器代码格式化将不可避免地产生大量空白，尽管浏览器将其减少为单个空白，但不可避免地会出现伪影。

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

任何人都可以提出其他建议吗？

4

1 回答 1

0

那绝对不是您的编辑器格式奇怪，而是浏览器在嵌套在元素中并且处于默认样式时呈现锚点的方式。默认样式为：

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>

于 2018-04-14T22:08:43.070 回答