javascript - Firefox 不渲染整个 CSS 文档

Question

编辑

问题解决了!出于某种原因，我需要将背景样式放在 ms vendor 前缀之前

---

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

(在 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%;
}

(我在 Firebug 中看到的)

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

这是插入默认值的示例。