2

fontello font-icons를 사용하고 있습니다. 그들은 Internet Explorer를 제외하고 완벽하게 작동합니다. 그들은 호버 상태와도 반응하지 않습니다 ... 나는이 순간에 얻고있는 문제는 폰트 아이콘 밑에 밑줄을 치는 것입니다.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)); 
       } 
     } 
    } 
+0

코드에 대한 링크를 게시 할 수 있습니까? 그것은 다른 css가 그것과 상호 작용하고있는 것을 보지 않고서는 알기가 어렵습니다. –

+0

@dsrotey 여기에 제 모든 CSS 코드가 있습니다. SASS를 사용하고 있습니다. 궁금한 점이 있으면 알려주세요. 나는 열려 있습니다! 지금 이것은 모두 로컬입니다. –

+0

http://codepen.io (SASS 허용)와 같이 사용할 수 있습니까? –

답변

3

다른 솔루션을 사용해 본 후에 해결책을 찾았습니다. 이상하게도 나머지 모든 브라우저는 IE와 같은 이상한 밑줄을 표시하지 않습니다. 그래서 header nav atext-decoration: none;을 적용하면 효과가있었습니다. 내 오류는이 텍스트 장식을 아이콘 자체에 적용하는 것이 었습니다.

다른 브라우저가이 이상한 밑줄을 표시하지 않은 이유를 모르겠지만 적어도 다른 사람이이 문제를 가지고 있다면 나를 위해 일한 해결책은 텍스트 장식 : 없음이었습니다.

도움을 드리겠습니다!

경찰서. 도움말 dstorey을 주셔서 감사합니다

+0

이것이 효과가있는 것이 기쁩니다. 그러나 나는 그것을 실제 해결책으로 보지 않습니다. 종종 아이콘에 링크가 있지만 링크에는 밑줄이 필요합니다. – dalgard

0

오버 플로우 : 숨김이 문제를 해결