为什么我的网站在Firefox上与其他所有浏览器看起来都不同

Question

我正在玩一个网站,我注意到我的网站在Chrome,Safari和其他网站上看起来很不错.它在Firefox(23)上不会流动.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;
}