2

私は fontello font-icons を使用しています。それらは、Internet Explorer を除いて完全に動作します。彼らはホバーステータスにも反応しません...私が現時点で得ている問題は、フォントアイコンの下の奇妙な下線です。

私はすでに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));
                }
        }
    }
4

1 に答える 1

4

さまざまなソリューションを試した後、解決策を見つけました。奇妙なことに、残りのブラウザはすべて、この奇妙な下線を表示せず、IE だけです。それで私はに応募text-decoration: none;しheader nav a、それはうまくいきました。私のエラーは、このテキスト装飾をアイコン自体に適用することでした。

他のブラウザではこの奇妙な下線が表示されず、IE では表示される理由がわかりませんが、少なくとも他の誰かがこの問題を抱えている場合、私にとって有効な解決策は text-decoration: none でした。

お役に立てれば幸いです!!!

PD 助けてくれてありがとう

于 2013-05-06T08:20:57.020 に答える