버튼 배경이 Firefox에서 완전히 채워지지 않습니다.

Question

버튼이 있지만 여기에 문제가 있습니다. Firefox 에서만 만 완전히 채워지지 않습니다. 여기

을 볼 수 있듯이 이것은 내가 할 정말로 확실하지 않다

과 같아야 것입니다. 여기에 CSS

.button-panel .button { 
    -webkit-appearance: none; 
    border: none; 
    cursor: pointer; 
    height: 55px; 
    font-size: 27px; 
    letter-spacing: 0.05em; 
    text-align: center; 
    width: 100%; 
    font-family: 'Avenir Next'; 
    display: inline-block;  
    font-weight: 300; 
    background-color: #6699FF; 
    outline: 3px solid #6699FF; 
    line-height: 59px; 
} 

그리고 데모 http://jsfiddle.net/h7PXe/

Answer 1

height: 100%를 수행합니다. 이 작업을 수행해야합니다. 그렇지 않으면 브라우저는 높이를 설정할 대상을 알 수 없습니다.

.button-panel .button { 
    -webkit-appearance: none; 
    border: none; 
    cursor: pointer; 
    height: 55px; 
    font-size: 27px; 
letter-spacing: 0.05em; 
text-align: center; 
width: 100%; 
font-family: 'Avenir Next'; 
display: inline-block;  
font-weight: 300; 
background-color: #6699FF; 
outline: 3px solid #6699FF; 
line-height: 59px; 
height: 100% 
} 

및 demo.

Answer 2

엘리먼트의 높이보다 큰 선 높이를 사용하는 이유가되는 이유. 이 http://i.stack.imgur.com/Q6J6n.png

당신은 기본 속성을 사용하지 않고 동일한 모양을 달성 할 수있다 (다음은 모든 브라우저에서 작동합니다)

.button-panel .button { 
    display: inline-block; 
    padding: 7px 0 5px; 
    border: 3px solid #6699FF; 
    width: 100%; 
    font-family: 'Avenir Next'; 
    font-size: 27px; 
    font-weight: 300; 
    letter-spacing: 0.05em; 
    text-align: center; 
    background-color: #6699FF; 
    cursor: pointer; 
    } 

: 여기

당신이 박스 모델이 워킹하는 방법을보고 있었다 수있는 것은 윤곽 있습니다 http://jsfiddle.net/h7PXe/1/