从Html.ActionLink中移除下划线

Question

我在页面上有一个 Html.ActionLink，并使用以下CSS为其添加了一张图片并尝试去除下划线.....

a.searchButton
{
    background-image: url(/content/images/DropAcross.png);
    background-repeat: no-repeat;
    height: 16px;
    width: 16px;
    display: block;
    text-decoration: none;
    clear:none;
}

这里有一个问题吗？所有的CSS属性似乎都能正常工作，除了text-decoration:none，它似乎无法去掉下划线。

- Simon Williams

---

我们可以看到你是如何创建这个链接的吗？ - spinon

没有看到明显的东西。你能同时发布HTML吗？（使用“查看源代码”而不是.ascx文件） - Iain Galloway

你有使用 Firebug 的权限吗？那将立即告诉你答案。 - Bobby Jack

可能另一个CSS规则通过border-bottom添加了下划线吗？ - Michael Mior

Answer 1

您需要查看渲染后的html。在Firefox或Google Chrome中，右键单击并选择“检查元素”。

您可能会发现一些愚蠢的事情，比如searchButton类被应用于包装a标签的span中，这种情况下，您可以让所有内容正常工作，除了链接特定规则。

text-decoration:none;

- awrigley

---

在Chrome中检查元素让我找到了答案。还有另一个样式添加了底部边框。非常感谢。 - Simon Williams

Answer 2

我知道这是一个旧话题，但也许有人会认为这很有帮助 - 上面提到的"text-decoration"属性可以通过以下方式传递给ActionLink：

@Html.ActionLink("Display_Name","Action_Name",null,new {style="text-decoration:none;"})

- Guest

---

是的，没错。我们需要在那里输入“null”，这样样式才能正常工作。 - Nagaraj Pujar

Answer 3

text-decoration:none;应该有效。

有可能存在其他样式覆盖它吗？您是否查看过Firebug（或类似工具）以查看应用的样式？

一个可能的答案可能是:hover，:visited和:active伪类。如果它们设置为有下划线，则会覆盖元素的默认样式。

- Spudley