Internet Explorer가 내가이 요소가 홀수 높이

Question

요소와 내부의 텍스트를 낮추는 :

.container { 
 
    font-size: 14px; 
 
    line-height: 20px; 
 
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 
.link { 
 
    color: #3072c4; 
 
    cursor: pointer; 
 
} 
 

 
.counter { 
 
    display: inline-block; 
 
    min-width: 9px; 
 
    padding: 0 4px; 
 
    text-align: center; 
 
    line-height: 17px; 
 
    background: #FF8000; 
 
    color: #fff; 
 
    font-size: 12px; 
 
    font-weight: 700; 
 
    border-radius: 17px; 
 
}

<span class="container"> 
 
\t \t <span class="link"> 
 
     Feedback 
 
    </span> 
 
     <span class="counter">166</span> 
 
\t </span>

이

그 높이가 17px이어야합니다, 수평 패딩은 4 픽셀이어야하며, 글꼴 크기는 12 픽셀이어야합니다.

을하지만 Internet Explorer에서 문제가있는 것입니다 : 그것은 크롬과 파이어 폭스의 프로토 타입처럼 보이는

그것은 내부의 텍스트를 낮추는

, 그것은 잘 수직으로 정렬되지는. line-height와 width를 18px로 설정하면 모든 것이 정상이지만 17px가 필요합니다. IE에서 텍스트 줄이기를 피하는 방법은 무엇입니까?

Answer 1

IE에 특정 스타일을 추가 할 수 있습니다. 이 시도 할 수 있습니다 :

.container { 
 
     font-size: 14px; 
 
     line-height: 20px; 
 
     font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    } 
 

 
    .link { 
 
     color: #3072c4; 
 
     cursor: pointer; 
 
    } 
 

 
    .counter { 
 
     display: inline-block; 
 
     min-width: 9px; 
 
     padding: 0 4px; 
 
     text-align: center; 
 
     line-height: 17px; 
 
     background: #FF8000; 
 
     color: #fff; 
 
     font-size: 12px; 
 
     font-weight: 700; 
 
     border-radius: 17px; 
 
    } 
 
    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { 
 
     /* IE Edge 12+ CSS styles go here */ \t 
 
     .counter { 
 
      display: inline-block; 
 
      min-width: 9px; 
 
      padding: 0px 4px 1px 4px; 
 
      text-align: center; 
 
      line-height: 17px; 
 
      background: #FF8000; 
 
      color: #fff; 
 
      font-size: 12px; 
 
      font-weight: 700; 
 
      border-radius: 17px; 
 
     } 
 
    }

<span class="container"> 
 
\t \t <span class="link"> 
 
     Feedback 
 
    </span> 
 
     <span class="counter">166</span> 
 
\t </span>