html - 为什么我在锚标签中出现小破折号？

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 标签来创建按钮。为什么我在右角得到小破折号？？

提前致谢

Answer 1

有一个text-decoration:underline与锚<a>标记关联的默认值。由于 中有一个空格<a> </a>，所以下划线就是你看到的那条线。

使用text-decoration:noneon <a>，应该可以解决。

a {
    text-decoration: none;
}

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 中复制了同样的问题。

我只能猜测在图像之后添加了一个空格，因为结束标记位于单独的行上。这与上面给出的答案有关 - 空间正在自动设置下划线样式。但我不知道为什么在图像之后而不是在文本之后添加空格，或者为什么这只发生在图像在同一行时。

Answer 3

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