为什么这个特定文本在悬停时加下划线？

Question

我有一些文字，内联样式如下：

<a style="margin-left:87px;color:white;">3mm</a>

出于某种原因，它在悬停时加下划线。它看起来像这样：

包含的div是：

<div class="next-slide-container">
     Poke &nbsp;&nbsp; ID<br>
     Choose your Pokemon<br>
     Details<br>
     Size<br>
</div>
<div class="next-slide-container" style="margin-top:-7px">
     <a style="margin-left:87px;color:white;">3mm</a>
     <img class="texture-icon" role="button" src="Resources/Cutups/Texture_Icons/Pikachu.png">
</div>

我尝试使用JSFiddle重新创建它，但我无法获取下划线的文本是JSFiddle，即使容器的css与我自己的源代码没有区别。此外，第一个div类next-slide-container中的文本，如“选择你的宠物小精灵”，在我的代码中没有突出显示。它只是“3毫米”;所以似乎内联样式是问题？感谢。

Answer 1

默认情况下，大多数浏览器将锚标记<a>设置为具有css text-decoration: underline;如果要删除任何浏览器默认下划线，则需要为锚标记添加text-decoration: none; css。

基本上......将其添加到您的CSS文件或区域。

a { text-decoration: none; } 

某些浏览器也添加默认大纲或伪＆＃34;发光＆＃34;锚标签（Mozilla）。

如果你想让它也消失，你可以将它添加到你的CSS的锚标签：

a { text-decoration: none; outline: none; } 

有效的HTML意味着您需要向锚标记添加href=值或name=值。如果没有其中一个，则a标签无效。

在小提琴中，这个无效的锚标记可能是您没有在浏览器中看到同样内容的原因。将href="#"添加到您的小提琴中的锚标记中，您将看到相同的问题。 jsFiddle并不像浏览器那样容忍不正确的标记。这就是jsFiddle的目的。浏览器会猜测有时意味着什么，jsFiddle确实没有。

如果您只想为文字设置样式，则可以使用<p>，<span>，<div>，<h1>等标记。您根本不需要锚标记来设置文本样式。