Firefox와 다른 모든 브라우저에서 내 사이트가 달라 보이는 이유

Question

사이트를 가지고 노는 중이며 Chrome, Safari 및 기타 사이트에서 내 사이트가 잘 보이는 동안 나타났습니다. 파이어 폭스 (23)에서도 마찬가지입니다. Firefox는 패딩과 높이 같은 것을 어떻게 처리합니까?

크롬 :

/*----------all small sizes------------*/ 
a.small-block{ 
    font-size: 1em; 
    height: 134px; 
    width: 40%; 
    padding: 2.5%; 
    margin: 2.5%; 
} 
a.about{ 
    background-color: #CBA70C; 
} 
a.music{ 
    background-color: #F35C4D; 

} 
a.pictures { 
    background-color: #6398FF; 
} 
a.feedback { 
    background-color: #B82808; 
} 
/*----------end of small boxes---------*/ 

/*------------medium boxes--------------*/ 
a.med-block{ 
    font-size: 1.5em; 
    font-weight: 300; 
    width: 90%; 
    padding: 2.5%; 
    margin: 2.5%; 
} 
a.albums { 
    background-color: #B34945; 
} 
a.songs { 
    background-color: #80ADEA; 
} 
/*------------end of medium boxes---------*/ 

/*--------------big box--------------*/ 
a.big-block{ 
    font-size: 1.875em; 
    font-weight: 300; 
    height: 187px; 
    width: 100%; 
    padding: 160px 0 5px 5px; 
    margin-top:2.5%; 
} 
a.history{ 
    background-color: #A3BF3B;  
} 
/*-------------end of big box-----------------*/ 

a.med-block, a.small-block, a.big-block { 
    -moz-box-sizing: border-box; 
    color: #FFFFFF; 
    display: block; 
    float:left; 
    overflow:hidden; 
    text-decoration: none; 
    transition: background-color 250ms ease-out 0s; 
} 

파이어 폭스가 다른 패딩을 읽고 그것은 나에게 같습니다

파이어 폭스 여기

내 CSS입니다.

a.med-block, a.small-block, a.big-block { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    color: #FFFFFF; 
    display: block; 
    float:left; 
    overflow:hidden; 
    text-decoration: none; 
    transition: background-color 250ms ease-out 0s; 
} 

Answer 1

당신은 아래의 선택기에 대해 정의 된 -moz 접두어가 그것은 파이어 폭스에서만 귀하의 항목을 스타일 것입니다. 파이어 폭스에 대한 추가 코드를 추가합니다.

@-moz-document url-prefix() { 
    h1 { 
    color: red; 
    } 
} 

Answer 2

이 시도 : - 나는 파이어 폭스에서 잘보고 그것을 변경하면 다른 모든 브라우저가 달라 보이는 당신은 다른 브라우저에 대한 box-sizing: border-box;을 놓치고