Html Firefox에서 CSS 버튼이 다르게 보입니다.

Question

다음과 같이 모든 버튼에 대해 CSS 정의가 있습니다. 그러나 내 버튼은 모질라 파이어 폭스에서 이상하게 보입니다. firfox 모질라를 제외한 모든 브라우저에서 괜찮아 보입니다. 나는 이유를 찾을 수 있었다. 그것을 확인할 수 있습니까?

파이어 폭스 :

크롬

HTML을 버튼

<button class="btn btnFB btnBig" >Signin By Facebook </button> 

CSS의 정의

,451,515,

.btn { 
    display: inline-block; 
    margin: 0; 
    cursor: pointer; 
    border: 1px solid #bbb; 
    overflow: visible; 
    padding: 7px 2px 7px 20px; 
    font-size: 0.97em; 
    font-weight: bold; 
    vertical-align: middle; 
    text-decoration: none; 
    white-space: nowrap; 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    -webkit-transition: all .15s linear; 
    -moz-transition: all .15s linear; 
    transition: all .15s linear; 
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.35); 
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255,0.3)), to(rgba(255, 255, 255, 0))); 
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0)); 
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0)); 
    background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0)); 
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0)); 
    background-image: linear-gradient(top, rgba(255, 255, 255, 0.3),rgba(255, 255, 255, 0)); 
} 

button.btnFB{background-color: #3b5998;border-color: #3b5998;color: #FEF3E5;} 
button.btnFB:hover{background-color: #4966A5;} 
button.btnFB:active{background-color: #3b5998;} 
button.btnBig{line-height: 1.33em;padding: 8px 12px 8px 30px;} 

편집 : 내 웹 사이트

body{ 
    font: normal 12px RobotoDraft,Roboto,'Helvetica Neue',arial,sans-serif; 
    background-color: #F7F7F7; 
    color: #262626; 
} 

Answer 1

페이지에 글꼴을 설정하지 않으면 각 브라우저는 기본 글꼴을 사용합니다. 이것은 button 요소에 사용 된 폰트 패밀리가 다양 함을 의미 할 수 있습니다. 일반적으로 Arial이지만 Firefox는 설정이 다릅니다. MS Shell Dlg (Win 7). 각 브라우저의 개발자 도구를 사용하여 이러한 문제를 확인할 수 있습니다.

글꼴 크기에도 차이가 있습니다. 글꼴 크기를 0.97em으로 설정하면 브라우저에서 부모 요소의 글꼴 크기에 0.97을 곱한 다음 다른 방법으로 결과를 반올림 할 수 있습니다. 기본 글꼴 크기가 16px의 일반 기본값 인 경우 IE는 15.52 픽셀을 사용하고 Firefox는 정확한 정확한 값인 15.53 픽셀을 사용하며 Chrome은 16 픽셀을 사용합니다 (예 : 정수 픽셀 단위로 반올림). 글꼴 패밀리 변형과 함께 사용하면 작은 차이가 발생합니다.

당신은

font-size: 1em; 

에 의해 font-size: 0.97em를 대체하여 렌더링 더 균일하게하고 .btn 선택기와 규칙에

font-family: Arial; 

를 추가 할 수 있습니다.

브라우저가 약간 다른 방식으로 글꼴을 렌더링하기 때문에 모든 차이점이 제거되는 것은 아니며 모든 시스템에 Arial이있는 것은 아니므로 많은 차이점이 제거되지는 않습니다 (많은 최신 핸드 헬드 장치는 그렇지 않습니다).윈도우 7에서 파이어 폭스와 크롬에서 렌더링 :

폰트 패밀리에 대해서는, 좀 더 일관성있는 결과를 얻을 수, 다운로드 글꼴 (웹 폰트)를 사용할 수 있습니다. 약간 단추를 위해 이렇게 다만하는 것은 잔인 할 것이지도 모르지만, 어쩌면 당신은 그것을 위해 다른 용도가있다.

Answer 2

사이트의 글꼴 - 가족이란 무엇인가의 글꼴 가족? 글꼴 같은 문제입니다. 모든 브라우저가 모든 글꼴을 같은 방식으로 표시하는 것은 아닙니다. 만약 당신이 하나 이상을 지정했다면, 아마도 파이어 폭스는 하나를 찾지 않고 다른 하나를 찾는다.

Answer 3

크롬에서 사용하는 기본 글꼴은 Firefox에서 사용되는 글꼴과 다릅니다. 그러므로 그것은 다르게 보입니다.

Google 글꼴에서 많은 글꼴을 찾을 수 있습니다.

아직 찾지 못했다면 Google 소재 디자인의 Roboto 글꼴을 사용해보세요.

Answer 4

나는 이것이 line-height 문제라고 생각합니다. 다음과 같이 추가하십시오. line-height: 1.5; 도움이되는지 확인하십시오.