Firefox의 버튼

Question

Fiddle - 크롬과 파이어 폭스에서 모두 열면됩니다.

내 CSS에서 .button 클래스가있다 - I 버튼의 모든 종류의 사용 : 보시다시피 등 button.button, a.button

, 차이가 없습니다 Chrome에서 button.button과 다른 *. 버튼 요소 사이에 있습니다. FF-button.button에서 보는 바와 같이은 다른 * .buttons보다 약간 크다.

Chrome 에서처럼 FF로 버튼을 올바르게 렌더링하려면 어떻게해야합니까?

업데이트 : 이것은 SO의 게시물과 중복되지 않습니다.

에 StackOverflow는 코드 요청 :

.button { 
 
    font: normal 100% Arial, sans-serif; 
 
    position: relative; 
 
    display: inline-block; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    vertical-align: middle; 
 
    color: #00f; 
 
    background-color: transparent; 
 
    border: 1px solid #00f; 
 
    border-radius: 3px; 
 
    user-select: none; 
 
    outline: 0; 
 
    cursor: pointer; 
 
    white-space: nowrap; 
 
} 
 

 
.button_medium { 
 
    padding: 0 12px; 
 
} 
 

 
.button__text { 
 
    font-weight: 400; 
 
    display: inline-block; 
 
    line-height: 1; 
 
    vertical-align: top; 
 
    white-space: nowrap; 
 
} 
 

 
.button__text_medium { 
 
    font-size: 90%; 
 
    line-height: 28px; 
 
    letter-spacing: -1px; 
 
}

<div style="padding:5em;"> 
 
    <button class="button button_medium" type="button"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </button> 
 

 
    <label class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </label> 
 

 
    <span class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </span> 
 

 
    <a class="button button_medium"> 
 
     <span class="button__text button__text_medium">Save</span> 
 
    </a> 
 
</div>

Answer 1

당신이 봤어? AFAIK 그것은 실제로 중복입니다. 참조 : http://css-tricks.com/forums/topic/button-padding-issue/

다음 코드는 문제가 해결됩니다 :의

button::-moz-focus-inner { 
padding: 0 !important; 
border: 0 none !important; 
}