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

我的Internet Explorer 8+有以下问题。它可以在所有其他浏览器中使用。

我不希望在a标签内的i标签上出现下划线悬停效果。 IE 8+会忽略i标签上的悬停伪类。
这里是HTML代码：

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

这是关联的CSS代码：

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

最佳答案

将“打印”包装在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