IE 创建 font-icon 奇怪的下划线

Posted 2023-03-05

【中文标题】IE 创建 font-icon 奇怪的下划线

【英文标题】：IE creates font-icon strange underline

【发布时间】：2013-04-28 01:55:37

【问题描述】：

我正在使用 fontello 字体图标。除了 Internet Explorer 外，它们都能完美运行。他们对悬停状态也没有反应，所以......我现在遇到的问题是字体图标下的trange下划线。

我已经尝试过 text-decoration、border-bottom...

有没有人可以解决这个问题：

这是我的 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));
                
        
    

【问题讨论】：

您可以发布您的代码的链接吗？如果不查看其他 css 正在与之交互，就很难知道

@dsrotey 在这里哟去我所有的 CSS 代码。我正在使用SASS。如果有任何问题，请告诉我，我非常开放！！！目前这都是本地的。

你能把它放在诸如codepen.io之类的东西中（它允许SASS），这样我们就可以看到它运行了吗？

我尝试通过 codeopen.io 输入示例，但无法插入 fontello 图标字体。这必须通过@font-face 插入。所以它需要在内部结构中找到一些文件。所以......我不能让它工作。还有其他建议吗？

【参考方案1】：

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

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

希望能帮到你！！！

P.D.感谢dstorey的帮助

【讨论】：

我很高兴这对你有用，但我不认为它是一个真正的解决方案 - 通常，链接需要下划线而不是图标。