HTML文本下方的白点

Question

我在网站上的输出在文字下面有点：

为什么会这样，以及如何删除它？

HTML

<p align = "center"><font size = "4.5" color="#979C91"><a href="customer.html"><span class="fa fa-pencil"> Customers</span></a>
&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp 
<a href="business.html"><span class="fa fa-pencil"> Business</font></span></p></a>

CSS

.fa {
    text-decoration: none;
}
.fa.solo{}
.fa.solo span {
    display: none;
}
.fa:before {
    display:inline-block;
    font-family: FontAwesome;
    font-size: 1.25em;
    text-decoration: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.fa-pencil:before{
    content:"\f040"
}

Answer 1

有一个虚线边框应用于该元素的底部。要删除它，您可以应用以下CSS删除它：

border-bottom: none;

如果无法看到其余代码，很难说是导致这种情况发生的原因。

Answer 2

将此添加到您的css文件

a{
text-decoration:none;}

您所指的网站（http://fontawesome.io/）的css代码是

a:focus {
outline: thin dotted;
}
a:active, a:hover {
outline: 0 none;
}

如果这是你的编码，那就是问题。

这不是你.fa类就是问题..

Answer 3

尝试调试。右键单击您的浏览器，然后检查元素字段。在右侧部分，您将看到文本修饰声明在哪个文件中。

屏幕截图：http://d.pr/i/PoDI

Answer 4

试试这个

> <p align = "center"> <font size = "4.5" color="#979C91"><a
> href="customer.html" style="text-decoration: none"><span class="fa
> fa-pencil"> Customers</span></a>   <a href="business.html"
> style="text-decoration: none"><span class="fa fa-pencil">
> Business</font></span></p></a>

Answer 5

问题在于css中的.a

a
    {
        text-decoration: none;
        color: inherit;
        border-bottom: dotted 1px rgba(128,128,128,0.5);

我删除了边框底部，现在我没有得到任何点。