html - a 标签内的不同悬停行为。 IE 8+ 中的问题

Question

我在使用 Internet Explorer 8+ 时遇到以下问题。它适用于所有其他浏览器。

我不希望在 a 标签内的 i 标签上有下划线悬停效果。 IE 8+ 忽略 i-tag 上的 hover 伪类。 这是 HTML 代码:

<a href="#"><i class="icon-print"></i>Print</a>

这是关联的 CSS 代码:

a:hover {text-decoration: underline;}
a i:hover {text-decoration: none;}

Answer 1

将“print”包裹在span

中

<a href="#"><i class="icon-print"></i><span>Print</span></a>

在CSS中

a {text-decoration:none;}
a:hover {text-decoration:none;}
a:hover > span { text-decoration:underline;}

JsFiddle