Different hover behavior inside a a-tag. Issue in IE 8+

Question

I have the following problem with the Internet Explorer 8+. It works in all other Browsers.

I dont want a underline hover effect on the i-tag inside the a-tag. The IE 8+ Ignores the hover pseudoclass on the i-tag. Here ist the HTML-Code:

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

This is the associated CSS-Code:

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

Answer 1

Wrap "print" in a span

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

and in css

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

JsFiddle

Answer 2

This will never works dude because the a-tag contain the i-tag and in your CSS code you say

a:hover {text-decoration: underline;}

everything inside the a-tag will be underlined ... so the only solution is to separate the i-tag from a-tag