IE創建字體圖標奇怪的下劃線

我正在使用fontello字體圖標。除Internet Explorer之外，它們都可以完美工作。他們也不會對懸停狀態做出反應，所以......現在我遇到的問題是字體圖標下的一個trange下劃線。IE創建字體圖標奇怪的下劃線

我已經嘗試過的文字裝飾，邊框底部...

不要任何人有這方面的任何解決方案：

enter image description here

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

來源

2013-05-03 Daniel Ramirez-Escudero

您可以發佈一個鏈接到您的代碼？很難知道沒有看到什麼其他的CSS與它互動 – 2013-05-03 17:06:01

@dsrotey在這裏喲去我所有的CSS代碼。我正在使用SASS。如果有任何問題，請讓我知道，我比開放更多！目前這都是本地的。 – 2013-05-03 19:42:03

你可以把它放在諸如http://codepen.io（它允許SASS）的東西，所以我們可以看到它運行？ – 2013-05-03 21:36:48

在嘗試了不同的解決方案後，我找到了解決方案。奇怪的是，其餘的瀏覽器都不顯示這個奇怪的下劃線，只有IE。所以我申請text-decoration: none;到header nav a，它的工作。我的錯誤是將此文字修飾應用於圖標本身。

我不明白爲什麼其他瀏覽器從來沒有顯示過這個奇怪的下劃線和IE，但至少如果別人有這個問題，我爲我工作的解決方案是text-decoration：none。

希望能夠幫助!!!

P.D.感謝您的幫助dstorey

來源

2013-05-06 08:20:57

我很高興，這對你有用，但我不認爲它是一個真正的解決方案 - 通常，下劃線是希望在鏈接上，而不是在圖標上。 – dalgard 2013-08-19 10:51:47

溢出：隱藏修復此問題

來源

2018-03-06 14:27:00 Wannes

IE創建字體圖標奇怪的下劃線

回答

相關問題