删除链接中图像下的行

Question

我有几个实例,我将图像放在链接中.通常,如果设置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没有在链接中"强调"我的图像......任何建议都将受到高度赞赏.

在此输入图像描述

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

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

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

.nl {
    text-decoration:none;
}

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