IE创建字体图标奇怪下划线 [英] IE creates font-icon strange underline

问题描述

我使用fontello font-icons。他们工作完美除了与Internet Explorer。他们也不会与悬停状态反应，所以...我现在得到的问题是在字体图标下的下面一个斜线。

尝试文本装饰，边框底部...

任何人都有任何解决方案：

img src =https://i.stack.imgur.com/JIYjm.jpgalt =enter image description here>

这是我的CSS代码，我在此项目中使用SASS：

  nav {
 
a {
 width： 60px; 
 height：$ height-header-nav-tablet; 
 float：left; 
 line-height：50px; 
 text-align：center; 
 
 @media屏幕和（最小宽度：$ media-tablet-min）和（max-width：$ media-tablet-max）{
 width：$ width-header-link - 平板; 
} 
 
 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））; 
} 
} 
} 
  

解决方案>

尝试了不同的解决方案后，我发现了解决方案。奇怪的是，所有其余的浏览器不显示这个奇怪的下划线，只有IE。所以我应用 text-decoration：none; 到头导航a 我的错误是应用这个文本装饰到图标本身。

我不明白为什么其他浏览器从来没有显示这个奇怪的下划线和IE，但至少如果有人有这个问题的解决方案，为我工作的是文本装饰：无。

希望帮助!!!

感谢您的帮助dstorey

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));
                }
        }
    }

解决方案

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

这篇关于IE创建字体图标奇怪下划线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！