为什么我的网站在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;
}

Answer 2

试试这个它只会在firefox中设置您的项目样式。所以你为firefox添加了额外的代码。

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