IE creates font-icon strange underline

I'm using fontello font-icons. They work perfectly except with Internet Explorer. They do not react also with the hover status and so... The problem I'm getting at this moment is a trange underline under the font-icon.

I already tried text-decoration, border-bottom...

Do anybody have any solution for this:

This is my CSS code, I'm using SASS in this project:

nav{

        a{
            width: 60px;
            height: $height-header-nav-tablet;
            float: left;
            line-height: 50px;
            text-align: center;

            @media screen and (min-width : $media-tablet-min) and (max-width : $media-tablet-max) {
                width: $width-header-link-nav-tablet;
            }

            i.icon-menu{
                font-size: 30px;
            }

                &:link,
                &:visited{
                    color: $blue-dark-takeda;
                    @include border-gradient;
                    text-shadow: 1px 1px rgba(28, 42, 83, 0.2);
                }

                &:hover{
                    color: $white-takeda;
                    background-color: $blue-dark-takeda;
                    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
                }

                &:active{
                    @include background-image(radial-gradient(45px 45px, $blue-dark-takeda 25px, #111931 40px));
                }


                &.active {
                    color: $white-takeda;
                    background-color: $blue-dark-takeda;
                    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
                    @include background-image(radial-gradient(45px 45px, $blue-dark-takeda 25px, #111931 40px));
                }
        }
    }

回答1:

After trying out different solutions I found the solution. Strangely enough all the rest of browsers do not display this strange underline, only IE. So I applied text-decoration: none; to header nav a and it worked. My error was to apply this text-decoration to the icon itself.

I do not understand why the other browser have never displayed this strange underline and IE does, but at least if somebody else has this issue the solution that worked for me was text-decoration: none.

Hope to help!!!

P.D. Thanks for the help dstorey

回答2:

overflow: hidden fixes this problem