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