1

当 CSS 属性/值被用作与某个 CSS3 属性/值不兼容的浏览器的“后备”时，CSS 属性/值的位置是否重要？

例如，CSS3calc()功能仅适用于某些浏览器。假设我想要一个宽度是其父级的 1/3 的 div。我可以使用兼容width:calc(100%/3)的浏览器来实现这一点calc()。然后，对于不兼容的浏览器，我可以width:33.33%用作后备。

我的问题：将其置于width:33.33%上方或下方是否width:calc(100% / 3)会影响其有效性？一种层次结构会起作用，而另一种则不会吗？

也就是说，会像这样订购我的 CSS 属性：

div.column {
    width: 33.33%; /* Fallback in case the browser does not support calc() */

    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);
}

不同于像这样订购它们：

div.column {
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
    width: calc(100% / 3);

    width: 33.33%; /* Fallback in case the browser does not support calc() */
}
4

2 回答 2

2

是的，顺序很重要。浏览器将使用他们理解的最后一条规则，因此您的第二个示例将否定理解它的浏览器的 calc() 调用。

正如W3所述：

...如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。

于 2013-02-16T20:35:45.057 回答
1

是的，重要的是，应该首先放置“后备”。

原因：浏览器只会应用最后支持的声明样式，所以如果你有这个：

div {
    width: 400px;
    width: 300px;
    width: 200px;
    width: 100px;
}

...仅100px适用。这在涉及供应商前缀时很常见：

div {
    -moz-property: foo;
    property: foo;
}

在这种情况下，如果支持，Mozilla 浏览器将应用该标准 ，否则回退到特定供应商（如果支持）。供应商前缀的实际顺序无关紧要，因为浏览器通常不支持多个供应商前缀。property-moz-property

于 2013-02-16T20:37:49.970 回答