删除链接中图像下的线答案

【问题标题】：Remove line under image in link删除链接中图像下的线
【发布时间】：2011-01-24 18:05:56
【问题描述】：

我有几个将图片放在链接中的例子。通常，如果您设置border="0"，则链接下的行不适用于图像。但是，我必须将 DOCTYPE 指定为，现在在 FF 中，我看到了所有图像下的行。

我仍然希望我的链接带有下划线，但不是其中的图片。

<a href="link.php"><img src="img.png" height="16" width="16" border="0"> link</a>

我尝试通过添加 CSS 来解决它

a img {
    text-decoration:none
}

不幸的是，它没有用。我也试过了：

a img {
    border:0
}

IE 不会在链接中“下划线”我的图片...任何建议将不胜感激。

我仍然希望我的链接带有下划线，但不是其中的图片。

【问题讨论】：

标签： html css

【解决方案1】：

如果您想为带有图像的链接提供特殊情况，请给 a 元素一个类并删除该类的文本装饰：

HTML：

<a href="link.php" class="image-link"><img height="16" width="16" /></a>

CSS：

a img
{
  border: 0 none;
}
.image-link
{
  text-decoration: none;
}

如果您在链接中仅有一张图片，这很好，但是您在锚点中有两个文本和图片。 p>

解决方案是在锚点内的文本周围添加span：

<a href="link.php" class="image-link"><img height="16" width="16" /> <span>link text here</span></a>

并在样式表中添加额外的样式：

.image-link span
{
  text-decoration: underline;
}

【讨论】：

【解决方案2】：

一种解决方案是将图像用作背景图像而不是在 html 中，可能是 a 的父元素的背景。

【讨论】：

为什么会被否决？这是我怀疑对问题的正确解释的有效解决方案。
我的网站上有很多案例。我无法浏览所有案例并替换它们。或者我可以使用精灵。
@santa：所以你真正的问题是这个？ “我怎样才能摆脱 just 图像部分的下划线（同时保留文本下划线）而不改变我发布的 HTML 代码。最好在所有浏览器中，尤其是 Firefox”。您应该编辑您的问题以包含类似于我的措辞。
-1 将语义内容（在本例中为图像）移动到样式不是一个好建议。
@zzzzBov：当 OP 说“但是，我必须指定 DOCTYPE”之类的话时，你知道他没有考虑语义。

【解决方案3】：

如果有人关心，这里是我想出的一个替代解决方案来规避这个问题：

.nl {
    text-decoration:none;
}

&lt;a href="link.php" class="nl"&gt;&lt;img src="img.png" height="16" width="16" border="0"&gt;&lt;u&gt;link&lt;/u&gt;&lt;/a&gt;

【讨论】：

【解决方案4】：

a { text-decoration: none }

下划线来自 A-tag 而不是 IMG

【讨论】：

【解决方案5】：

对于那些无法编辑标记的情况（无法访问模板和/或周围的问题），您可以使用一点 jQuery。您可能需要调整语法以覆盖您的 CSS：

jQuery('a > img').parent().css({'text-decoration' : 'none'});

【讨论】：

【解决方案6】：

解决了

<a href="link.php" style="text-decoration: none"><img src="img.png" height="16" width="16" border="0"> link</a>

【讨论】：

【解决方案7】：

如果您要链接到图像，请尝试以下操作：

a[href$=jpg], a[href$=png] {
    text-decoration: none;
}

【讨论】：

【解决方案8】：

我的两分钱：

$('a').each(function(){
    var images = $(this).find("img");
    images.parent().addClass('no_border_img');
});

循环所有链接并在其中找到图片，然后为每个链接添加 CSS 样式。

仅适用于在前一个链接样式中包含链接的图像。记得为“no_border_image”创建样式。

【讨论】：