IE创建字体图标奇怪的下划线

Posted 2021-03-31

我正在使用fontello字体图标。除Internet Explorer外，它们的工作完美。他们也没有对悬停状态作出反应，所以......我现在得到的问题是字体图标下的一个下划线。

我已经尝试过文字装饰，边框底部......

有没有人有这个解决方案：

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

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

答案

在尝试不同的解决方案后，我找到了解决方案奇怪的是，所有其他浏览器都没有显示这种奇怪的下划线，只有IE。所以我将text-decoration: none;应用于header nav a并且它有效。我的错误是将此文本修饰应用于图标本身。

我不明白为什么其他浏览器从未显示过这个奇怪的下划线和IE确实如此，但至少如果其他人有这个问题，那对我有用的解决方案是text-decoration：none。

希望能帮到!!!

P.D.感谢dstorey的帮助

另一答案

溢出：隐藏修复此问题