为什么我的锚标签中会出现小破折号？

Question

<a href="service.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Sea Freight.png"/>
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="airfreight.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Air Freight.png">
</a>  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="projectcargo.html">
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Project Cargo.png">
</a>
<br/>
<a href="customclearance.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Custom Clearance.png">
</a>   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="transportation.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Domestic Transportation.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="thirdparty.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Warehousing and Distribution.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>
<a href="coastalcargo.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Coastal Cargo.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="veseelchartering.html" >
<img width="175" height="40" style="margin-left:20px; margin-top:10px; margin-bottom:10px;" src="image/Vessel Chertring.png">
</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</br>

我已经使用img标签在锚点内创建按钮。为什么在右下角会出现一个小破折号？谢谢提前。

- Akki

---

什么的右上角？一个特定的图像吗？每个图像？你确定“破折号”不是图像的一部分吗？也许这是一张损坏的图像，你只看到了“损坏图像”图标的一个角落。 - Marc B

看到这么多     &nbsp，我的头都要晕了。 - Pranav 웃

在每个图像中，我都会收到这个错误。 - Akki

@pranav 但是 &nbsp 并不重要。 - Akki

Answer 1

锚点 <a> 标签默认带有下划线样式 text-decoration:underline。由于 <a> </a> 之间有一个空格，所以你看到的就是那条下划线。

在 <a> 标签上使用 text-decoration:none 即可解决此问题。

a {
    text-decoration: none;
}

- Pranav 웃

---

@Akki：每当有一个链接（<a>）时，浏览器默认会给它添加下划线样式(text-decoration:underline)。 - Pranav 웃

太棒了！完美运行。 - coderpc

Answer 2

出现这种情况可能是因为：

• 闭合锚点标签与元素其他部分不在同一行
• 且锚点可见文本是图像
• 且你在同一行上有多个图像

• 而且锚点/图像不是水平序列中的最后一项

  在下面的示例中，您将看不到第三个和第五个图像后面的破折号，但其他图像将在图像/链接右侧显示一个破折号：

<p>
 <a href="#">
 <img src="image.jpg" alt="Test 1" />
 </a>

 <a href="#"><img src="image.jpg" alt="Test 2" />
 </a>

 <a href="#">
 <img src="image.jpg" alt="Test 3" /></a>

 <a href="#"><img src="image.jpg" alt="Test 4" />
 </a>

 <a href="#"><img src="image.jpg" alt="Test 5" />
 </a>
</p>

我找不到任何信息表明这违反了关于跨多行分割元素的HTML规则。在Chrome、Firefox和IE 11中都复制了相同的问题。

我只能猜测，在图像后面添加了一个空格，因为关闭标签位于单独的一行。与上面给出的答案相关的是，该空格会自动添加下划线样式。但我不知道为什么在文本后面没有添加空格，或者为什么只有当图像在同一行时才会出现此情况。

- Jake

Answer 3

<a>是一个内联元素。如果在封闭元素和</a>元素之间留下空格，它将自动格式化为带有下划线的文本。

- user6275623