链接在bootstrap glyphicon上

Question

我有以下rails代码

<%= 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删除了,则没有下划线,并且因为它位于锚标记之外,所以它不应该影响它.然而,它显然确实如此.

Answer 1

这是由于之后的空白而发生的</i>

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

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

而问题就消失了.

这是因为<i>元素是内联的(或者更确切地说是内联块),这意味着空格通常是重要的.

为了防止ERB在标记后用换行符包含换行符-%>,即:

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