html - 引导字形图标上的链接

Question

我有以下导轨代码

<%= link_to mypath do %>
    <%= content_tag(:i, "" ,:class=>' icon-eye-open' %>
<% end %>
<%= @num %>

生成html

<a href="/mypath">
    <i class=" icon-eye-open"></i>
</a>
100

问题是，如jsfiddle中所见，当鼠标悬停在图标上时，数字和图标之间有一个带下划线的空格。出于视觉目的需要该空间，但是如何在没有 css 的情况下删除链接的下划线？

为什么没有？我可以text-decoration: none;为一些特定或通用的 css 选择器做，但我想了解为什么会出现这种下划线。如果@num删除，则没有下划线，并且由于它位于锚标记之外，因此不应影响它。然而，显然确实如此。

score 12 · Accepted Answer

这是由于后面的空格而发生的</i>

尝试将 jsFiddle 中的代码切换为：

<a href="/mypath"><i class=" icon-eye-open"></i></a>100

问题就消失了。

这是因为<i>元素是inline（或者更确切地说，inline-block），这意味着空格通常是重要的。

为了防止 ERB 在标签后包含换行符，用尾随关闭它-%>，即：

<%= content_tag(:i, "" ,:class=>' icon-eye-open' -%>

1 回答 1