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

【问题标题】：Why does my site look different on Firefox vs every other browser为什么我的网站在 Firefox 上看起来与其他所有浏览器不同
【发布时间】：2013-08-12 13:03:34
【问题描述】：

我只是在玩一个网站，我注意到虽然我的网站在 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 上看起来不错，那么其他浏览器看起来会有所不同

【问题讨论】：

指向您网站的链接如果可以从外部访问，将会很有用。
不是。我提供了（我认为的）相关代码。如果您需要查看更多内容，请告诉我！

标签： css google-chrome firefox

【解决方案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;
}

【讨论】：

好吧，我最终只是删除了它。这似乎使它在 ff 上正常工作。

【解决方案2】：

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

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

【讨论】：