Html 引导程序字形上的链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16931333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
link on a bootstrap glyphicon
提问by Nick Ginanto
I have the following rails code
我有以下导轨代码
<%= link_to mypath do %>
<%= content_tag(:i, "" ,:class=>' icon-eye-open' %>
<% end %>
<%= @num %>
which generates the html
生成 html
<a href="/mypath">
<i class=" icon-eye-open"></i>
</a>
100
The problem is, as seen in the jsfiddle here, that when mousing over the icon, there is a space underlined between the number and the icon. The space is needed for visual purposes, but how do I remove the underline of the link without css?
问题是，正如这里的jsfiddle所见，当鼠标悬停在图标上时，数字和图标之间有一个带下划线的空格。出于视觉目的需要空间，但是如何在没有 css 的情况下删除链接的下划线？
Why without? I could do text-decoration: none;for some css selector, specific or generic, but I want to understand why this underline happens.
If the @numis removed, there is no underline, and since it is outside of the anchor tag, it shouldn't affect it. Yet, it obviously does.
为什么没有？我可以text-decoration: none;为一些特定的或通用的 css 选择器做，但我想了解为什么会出现这个下划线。如果@num删除了 ，则没有下划线，并且由于它在锚标记之外，因此不应影响它。然而，它显然是。
回答by kibibu
This is happening due to the whitespace afterthe </i>
这是由于后面的空白而发生的</i>
Try switching your code in the jsFiddle to:
尝试将 jsFiddle 中的代码切换为：
<a href="/mypath"><i class=" icon-eye-open"></i></a>100
and the problem goes away.
问题就解决了。
This is because the <i>element is inline(or rather, inline-block), which means whitespace is, as a rule, significant.
这是因为<i>元素是内联的（或者更确切地说是inline-block），这意味着空白通常很重要。
To prevent ERB from including a newline after a tag close it with a trailing -%>, ie:
为了防止 ERB 在标签关闭后包含换行符，请使用尾随-%>，即：
<%= content_tag(:i, "" ,:class=>' icon-eye-open' -%>
