Почему мой сайт отличается от Firefox и любого другого браузера?

Question

Я просто играю с сайтом, и я заметил, что, хотя мой сайт выглядит хорошо на Chrome, Safari и других. Он не течет в Firefox (23). Как Firefox обрабатывает такие вещи, как заполнение и высота?

Chrome:

Firefox

Вот мой CSS:

/*----------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; 
} 

Он смотрит на меня, как Firefox читает отступы по-разному. Если бы я изменить его, чтобы хорошо выглядеть на Firefox каждый другой браузер выглядит иначе

Answer 1

Вы упускаете box-sizing: border-box; для других браузеров - у вас есть только -moz префикс, определенный для ниже селекторов:

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 2

Попробуйте это он будет только стиль вашего элемента в firefox. поэтому вы добавляете дополнительный код для firefox.

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