IE creates font-icon strange underline

▼魔方 西西 提交于 2019-12-24 02:15:17

问题


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



来源:https://stackoverflow.com/questions/16362692/ie-creates-font-icon-strange-underline

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!