Firefox 不渲染整个 CSS 文档

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');

专有的微软主义。忽略。

-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[index].fadeIn(900);

解决此问题将解决后台问题。