IE8 : HTML 버튼 요소 주위에 이상한 테두리가 있습니다.

Question

사용자 정의 배경 (이미지 + 색상)과 테두리가없는 버튼 요소가 있습니다 (아래의 다른 속성 - 아래 코드). Firefox 및 IE8에서 다르게 적용됩니다. 문제는 이것이 IE8을 유일한 브라우저로 사용하는 회사를위한 작업이므로 IE8에서 버튼이 잘 렌더링되어야한다는 점입니다.

여기 둘 사이를 시각적으로 비교입니다 :

내 질문은 여기에 패딩 차이 (I가로 찾고 있어요)에 대한 하지입니다,하지만에 볼 수있는 이상한 경계에 대한 IE8 또한 일반 테두리 (border-bottom)에이 있습니다.

누구나 내게 설명 할 수있는 방법과 그것을 제거하는 방법?
미리 감사드립니다. 여기

는 HTML 코드입니다 :

<button class="btn" id="c_edit"> 
    <span>Annuler</span> 
</button> 

그리고 여기에 CSS입니다 : 당신이 height 만 font-size 설정하지 않은 이후

.btn { 
    display: inline-block; 
    margin: 0 0 7px 5px; 
    padding: 0; 
    color: #ddd; 
    font-size: 14px; 
    font-family: FrutigerLTStd55Roman, sans-serif; 
    text-decoration: none; 
    border: none; 
    border-bottom: 2px solid #222; 
    background-color: #999; 
    background-image: url('img/btn_bg.gif'); 
    background-position: 0 bottom; 
    background-repeat: repeat-x; 
    cursor: pointer; 
    transition: all .5s ease-out; 
} 
.btn span { 
    display: inline-block; 
    margin: 0; 
    padding: 8px 10px 6px 40px; 
    background-color: transparent; 
    background-position: 4px 0; 
    background-repeat: no-repeat; 
} 

Answer 1

모든 브라우저가 다르게 텍스트를 렌더링의 높이 버튼은 해당 브라우저의 OS 및 렌더링 엔진에 따라 다릅니다.

이 문제를 해결하려면 이미지에 버튼 height을 지정하거나 자르려면 작게 지정하십시오.