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

Question

Internet Explorer 8+ 存在以下问题。它适用于所有其他浏览器。

我不想在 a-tag 内的 i-tag 上出现下划线悬停效果。IE 8+ 忽略 i-tag 上的悬停伪类。这是 HTML 代码：

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

这是相关的 CSS 代码：

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

Answer 1

将“打印”包裹在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;}

提琴手

Answer 2

这永远不会起作用，因为 a-tag 包含 i-tag 并且在你的 CSS 代码中你说

a:hover {text-decoration: underline;}

a-tag 中的所有内容都将带有下划线......所以唯一的解决方案是将 i-tag与 a-tag分开