Html 删除链接中图像下的行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4785422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove line under image in link
提问by santa
I have a few instances where I place image within a link. Normally if you set border="0" there line under a link does not apply to the image. However, I had to specify DOCTYPE to be and now in FF I see the line under all images.
我有几个实例将图像放在链接中。通常，如果您设置 border="0" 链接下的线条不适用于图像。但是，我必须指定 DOCTYPE 为现在在 FF 我看到所有图像下的线。
I still would like to have my links underlined, but not the images within.
我仍然希望我的链接有下划线，但不是其中的图像。
<a href="link.php"><img src="img.png" height="16" width="16" border="0"> link</a>
I've tried to solve it with CSS by adding
我试图通过添加 CSS 来解决它
a img {
text-decoration:none
}
Unfortunately it did not work. I also tried:
不幸的是它没有奏效。我也试过：
a img {
border:0
}
IE does not "underline" my images within a link... Any suggestions would be highly appreciated.
IE 不会在链接中“强调”我的图片......任何建议将不胜感激。
I still would like to have my links underlined, but not the images within.
我仍然希望我的链接有下划线，但不是其中的图像。
采纳答案by santa
In case anyone cares, here's an alternative solution that I came up with to circumvent the issue:
如果有人关心，这是我想出的替代解决方案来规避这个问题：
.nl {
text-decoration:none;
}<a href="link.php" class="nl"><img src="img.png" height="16" width="16" border="0"><u>link</u></a>回答by zzzzBov
If you want to have a special case for links with images, give the aelement a class and remove the text-decoration for that class:
如果你想对带有图像的链接有一个特殊的情况，给a元素一个类并删除该类的文本装饰：
HTML:
HTML：
<a href="link.php" class="image-link"><img height="16" width="16" /></a>
CSS:
CSS：
a img
{
border: 0 none;
}
.image-link
{
text-decoration: none;
}
This is great if you onlyhave an image within the link, however you have bothtext andimages within the anchor.
这是伟大的，如果你只是有链接内的图像，但是你有两个文本和锚内的图像。
The solution for that would be to add a spanaround the text within the anchor:
解决方案是span在锚内的文本周围添加一个：
<a href="link.php" class="image-link"><img height="16" width="16" /> <span>link text here</span></a>
and add an additional style in the stylesheet:
并在样式表中添加一个额外的样式：
.image-link span
{
text-decoration: underline;
}
回答by jeroen
A solution would be to use the image as a background image instead of in the html, possibly the background of the parent element of the a.
一个解决方案是使用图像作为背景图像而不是在 html 中，可能是a.
回答by vinhboy
a { text-decoration: none }
The underline is from the A-tag not the IMG
下划线来自 A 标签而不是 IMG
回答by t4l
For those cases where editing the markup isn't an option (inaccessibility to templates and/or surrounding issues), you can use a little jQuery. You may need to adjust the syntax to override your CSS:
对于无法编辑标记的情况（无法访问模板和/或周围问题），您可以使用一点 jQuery。您可能需要调整语法以覆盖您的 CSS：
jQuery('a > img').parent().css({'text-decoration' : 'none'});
jQuery('a > img').parent().css({'text-decoration' : 'none'});
回答by Joe
Solved
解决了
<a href="link.php" style="text-decoration: none"><img src="img.png" height="16" width="16" border="0"> link</a>
回答by manuxi
If you are linking to an image, try the following:
如果要链接到图像，请尝试以下操作：
a[href$=jpg], a[href$=png] {
text-decoration: none;
}
回答by Moisés Busanya
My two cents:
我的两分钱：
$('a').each(function(){
var images = $(this).find("img");
images.parent().addClass('no_border_img');
});
Loop all links and find images inside, then for each one add CSS style to the link.
循环所有链接并在其中找到图像，然后为每个链接添加 CSS 样式。
Only for a image with link inside a previous link style. Remember to create the style for 'no_border_image'.
仅适用于在上一个链接样式中带有链接的图像。请记住为“no_border_image”创建样式。
