从 Html.ActionLink 中删除下划线答案

【问题标题】：Removing the underline from an Html.ActionLink从 Html.ActionLink 中删除下划线
【发布时间】：2011-04-26 00:14:35
【问题描述】：

我的页面上有一个 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;
}

谁能看出这个问题？除了 text-decoration: none 之外，所有 CSS 属性似乎都可以工作，这似乎保留了下划线。

【问题讨论】：

我们可以看看您是如何创建链接的吗？
看不到任何明显的东西。你也可以发布HTML吗？（“查看源代码”而不是 .ascx）
您可以访问 Firebug 吗？这会立即告诉你答案。
是否有可能另一个 CSS 规则正在通过 border-bottom 添加下划线？

标签： html css asp.net-mvc

【解决方案1】：

您必须查看呈现的 html。在 Firefox 或 Google Chrome 中，右键单击并选择检查元素。

您可能会发现类似 searchButton 类被应用到包装 a 标签的 span 之类的傻事，在这种情况下，除了链接特定规则之外，您将得到所有工作：

text-decoration:none;

【讨论】：

Inspect Element in Chrome 让我找到了答案。还有另一种样式添加了边框底部。非常感谢。

【解决方案2】：

我知道这是个老话题，但也许有人会认为它有帮助 -
上面提到的“text-decoration”属性可以通过这样的构造传递给ActionLink：

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

【讨论】：

是的，没错。我们需要在那里给出“null”，然后只有样式才能正常工作..

【解决方案3】：

设置text-decoration:none; 应该可以工作。

是否有可能有其他样式覆盖它？您是否查看过 Firebug（或类似工具）以了解应用了哪些样式？

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

【讨论】：