使用链接图像时如何摆脱链接边框？

Question

此图片描述了所有内容：

如您所见，每张图片下方都有一个边框，但不是左侧或右侧。

你也可以看到，我在检查器中标记了链接标签，它显示了从图像中间到图像下方的框架，包括不需要的边框。

我已经从链接中删除了文本修饰，但这没有改变。

由于大多数没有得到问题的根源，这里有一个更大版本的截图： http://imageshack.us/f/10/screenshotfgi.png/ 点击链接，再次点击你得到的图片。

看看右下方的蓝框。它由Chrome标记为我在检查器中选择了超链接标记。在这里你可以看到，超链接导致边框/空格。如何通过更改超链接标签的样式来摆脱这个空间？

Answer 1

这不是边界，也就是空间。

默认情况下，图像与a，b，c和d等字母位于同一行。对于你在g，j和y等字母上找到的下降器，该行下面有空格。

设置CSS vertical-align属性以在该行上移动图像。

Answer 2

链接时删除图像的边框而不使用border =“0”：

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

但似乎不是你的问题。

编辑：检查表格的cellpadding / cellspacing。你的细胞应用了某种填充或边距。

Answer 3

由于您使用的表可能是由于cellspacing属性所致。

集：

<table cellspacing="0" cellpadding="0">

在你的桌子上。 img在链接中时出现的边框通常是蓝色。

编辑： 可能搞乱的另一件事可能是垂直对齐。我认为默认值设置为基线 - 尝试将td和img中的垂直对齐设置为vertical-align:top

Answer 4

我有类似的问题。

为锚点或td设置line-height: 0。

#your_id table a, #your_id table td {
    line-height: 0;
}

或手动设置a或td。{/ p>的height

#your_id table a, #your_id table td {
    height: 30px;
}
#your_id table a {
    display: block;
}

两种方式都适合我。

Answer 5

如果没有一段示例代码，很难说清楚......

我要说的是重置所有可能导致此问题的属性：

table {
    border-collapse: collapse;
}
table, tr, th, td {
    border: 0;
    padding: 0;
}
td, td a {
    line-height: 0;
    white-space: normal
}
td, a, td a img {
    border: 0;
    padding: 0;
    margin: 0;
}

这有帮助吗？