删除链接中图像下的行

Question

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

我仍然希望我的链接加下划线，但不是内部的图像。

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

我试图通过添加

来解决它

a img {
    text-decoration:none
}

不幸的是它不起作用。我也尝试过：

a img {
    border:0
}

IE没有在链接中“加下划线”我的图片......任何建议都将受到高度赞赏。

Example Link

我仍然希望我的链接加下划线，但不是内部的图像。

Answer 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;
}

如果仅在链接中包含图片，那就太棒了，但是你在锚点中有 文本和图像。

解决方案是在锚点内的文本周围添加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;
}

Answer 2

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

Answer 3

如果有人关心，这是我提出的另一种解决问题的解决方案：

.nl {
    text-decoration:none;
}

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

Answer 4

a { text-decoration: none }

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

Answer 5

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

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

Answer 6

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

import matplotlib as mpl mpl.rc('lines', linewidth=2, color='r')

Answer 7

我的两分钱：

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

循环所有链接并在里面找到图像，然后为每个链接添加CSS样式到链接。

仅适用于上一个链接样式中包含链接的图像。请记住为＆＃39; no_border_image＆＃39;。

创建样式