Question

修改

问题解决了！出于某种原因，我需要将背景样式放在ms供应商前缀

之前

所以我昨晚推出了我的网站，在发送链接给聊天中的一些人后，我发现Firefox中的背景图像根本没有显示。路径是正确的。我去了Firefox并打开了firebug，似乎Firefox完全忽略了我的CSS文档的整个部分。这在Safari或Chrome中不会发生。这是我遇到问题的块：

（Safari和Chrome中的视图页面源代码是什么样的）

#header {
    width: 100%;
    min-height: 300px;
    overflow: hidden;

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
    sizingMethod='scale');

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
    sizingMethod='scale')";

    background: url(/images/ios7.jpg) no-repeat fixed;
    webkit-background-size: 100% 100%;
    moz-background-size: 100% 100%;
    o-background-size: 100% 100%;
    background-size: 100% 100%;
}

（我在萤火虫中看到的）

#header {
    background-size: 100% 100%;
    min-height: 300px;
    overflow: hidden;
    width: 100%;
}

它不仅忽略了这种风格的最大部分，而且还重新安排了其余部分。我从未见过这样的事情。您可以在samrapdev.com

查看该网站

我遇到过Firefox似乎正在做的其他一些奇怪的事情，比如添加我从未指定的样式，例如：

.mainNav ul li:hover {
    background: rgba(255, 255, 255, 0.2);
}

在firefox中更改为：

.mainNav ul li:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);
}

这里发生了什么？

Answer 1

Firebug在解析CSS后会显示应用的样式，并重新排序属性以保持一致性。

CSS具有覆盖无法识别的属性（忽略它们）的规则以及省略了可选值的速记属性（将它们设置为默认值）。

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
sizingMethod='scale');

专有的Microsoftism。忽略。

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./ios7.jpg',
sizingMethod='scale')";

同上。

webkit-background-size: 100% 100%;

无效。（如果它是-webkit-那么它将是WebKit浏览器的实验属性，应该被忽略。）

moz-background-size: 100% 100%;

无效。（如果它是-moz-那么它将成为Mozilla浏览器的实验属性.Firefox现在支持没有前缀的属性，因此它仍然应该被忽略。）

o-background-size: 100% 100%;

作为webkit但是对于Opera。

background: none repeat scroll 0 0 rgba(255, 255, 255, 0.2);

这是插入默认值的示例。

Answer 2

我认为这是因为脚本错误。当我在firebug中检查它时，我收到以下脚本错误

TypeError：listElm [index]未定义 listElm [指数] .fadeIn（900）;

修复此问题将解决背景问题。

Firefox无法呈现整个CSS文档

2 个答案: