缺少<a href=""> and <u></u></a>的下划线

Question

我有以下代码部分：

    echo "<form>
          <div id=\"error\"align=\"center\">";
    echo "You've either key-ed in the wrong <b>username</b> or wrong <b>password</b>. <br/>";
    echo "Please contact person in-charged or click <u><a href=\"login.php\">here</a></u> to login again.";
    echo "</div></form>";

和相应的CSS：

#error{
font-family: "Acens", Verdana, Tahoma;
background: -webkit-linear-gradient(#fff, #2f4f4f);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

html, body {
    height:100%;
    width:100%;
    margin:0px;
}
body {
    display:table;
    vertical-align:middle;
}
form {
    display:table-cell;
    vertical-align:middle;
    width:240px;
    margin:0px auto;
}

输出：

如图所示，here没有预期的任何下划线。但是，它仍然可以将用户引导到另一个页面。

Answer 1

因为-webkit-background-clip

How to include text decoration in background-clip: text; effect?

Answer 2

如果您尝试在css中手动设置下划线

，该怎么办？

 a {
     text-decoration: underline
   }

Answer 3

添加样式

a:link {
text-decoration: underline;
}

到你的样式表。就像@patsy说的那样，你去掉了它。并将它放在样式表的末尾是安全的（因此，如果它出现在删除它的规则之后）。

Answer 4

添加此款式

#error a {
    text-decoration:underline !important; //override
}

Answer 5

也许这是您使用的自定义字体的问题， Acens 。

尝试使用替代方法，一种“黑客” - 将其添加到您的CSS：

#error a{
  border-bottom:1px solid #000;
}