两个图像链接之间的下划线

Question

我在div中有以下HTML代码：

<a href="http://www.mysql.com">
<img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a href="http://www.php.net"> 
<img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

这导致以下输出中带有下划线！？：

如果我只使用一个图像链接，则下划线消失。

为什么会发生这种情况？如何摆脱下划线？

Answer 1

下划线是一个或多个带下划线的空格字符。修复方法是删除可能被视为a元素内部空格的任何内容，例如换行符。可以使用换行符和标记内的其他空格（<和>之间），但是：

<a href="http://www.mysql.com"><img src="images/php-power-micro2.png" 
  alt="PHP powered" border="0" title="PHP" /></a>
<a href="http://www.php.net"><img src="images/mysql-power.jpg"
  alt="MySQL powered" border="0" title="MySQL"/ ></a>

这意味着a元素之间仍然存在换行符，浏览器通常将其视为空格。在这种情况下，这可能无关紧要，因为空间在a元素之外，因此不会加下划线;它只会造成一点间距。但是为了使图像更清晰地分开，请考虑在第二个padding-left元素上添加a。

Answer 2

'下划线'实际上是'a'标签的下划线。这是浏览器应用的一种表示超链接的样式。要删除下划线但保留超链接，请设置'a'标记的样式。

a{text-decoration:none;}

你也可能在页面上有其他链接，所以最好给这些链接一个类，以便它们可以单独设置样式。

<a class="imageLink" href="http://www.mysql.com">
  <img src="images/php-power-micro2.png" alt="Image not available" title="PHP" border="0"/>
</a>
<a class="imageLink" href="http://www.php.net"> 
  <img src="images/mysql-power.jpg" alt="Image not available" border="0" title="MySQL"/>
</a>

然后做这样的事情：

a.imageLink{
    text-decoration:none;
}

或者，您可以使用内联样式：

<a style="text-decoration:none;" class="imageLink" href="http://www.mysql.com">

道歉，如果你已经知道这一点并且看起来很明显，我只是想给出一个明确的答案。 ：）

Answer 3

删除锚点的开始和结束标记与其包含的图像之间的空白区域。

Answer 4

您可以使用以下css删除文本修饰

a
{
text-decoration: none;
}

或者您可以删除图像和锚标记之间的空白区域。

两者都将解决问题

Answer 5

删除这些text-decoration代码的a就足够了 - 无需通过删除换行符和缩进来降低标记的可读性。

但请记住删除hover的样式：

a, a:hover
{
    text-decoration: none;
}

Answer 6

我有几次相同的问题。我尽力解决了所有问题……您要做的就是添加文本修饰：无；到您的a-tag（不是图片）上。