Question

我使用W3C CSS Validation Service来验证CSS，它返回了以下错误：

属性-moz-border-radius-bottomleft不存在：5px

我的问题是，我们是否还需要它，因为现代浏览器似乎理解border-bottom-left-radius等。

这是完整的CSS：

height: 160px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

Answer 1

Firefox了解标准化的border-*-radius属性starting from version 4。

如果您要为所有四个角指定相等的半径，并且您不支持Firefox＆lt; 4.0和其他旧版浏览器，您也可以将令人惊愕的八个边界半径声明减少到一个：

height: 160px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

如果您需要支持Firefox 3.6及更早版本，您仍然需要使用前缀属性，但是为每个角落指定一个仍然只是在寻找麻烦：

height: 160px;
-moz-border-radius: 5px;
border-radius: 5px;
background: transparent url(../images/search-box-repeat-small.png) repeat;

另请注意，未加前缀的属性应该在规则中 last ，因此支持无前缀属性的浏览器将使用它来获得最佳标准一致性。¹

¹ _{是的，供应商确实以不符合的方式实现了前缀属性，因为规范中没有任何内容表明它们不能。有关Mozilla删除前缀后更改内容的详细信息，请参阅Gecko notes for -moz-border-radius。}

Answer 2

嗯，很多人都坚持支持IE6，所以是的，你应该支持只有-moz-border-radius的旧版Firefox。

哦等等，Firefox用户所以比IE用户更聪明，所以他们知道如何更新。好吧，猜你不需要它。

真的，这取决于你。如果你想保留它，那么就这样做。除了一点额外的带宽之外没有真正的缺点（如果你正确缓存，这应该不是问题），为什么不呢？

Answer 3

对于Firefox，我个人认为不需要这个供应商前缀。大多数现代浏览器都支持border-radius属性。

您可以查看此网站以获取浏览器支持： http://caniuse.com/border-radius

Answer 4

对于现代版本的firefox no ..

但为了向后兼容，您需要它们（ pre 4.0 ）

同时查看-prefix-free以自动处理所有（几乎）浏览器的所有前缀

Answer 5

供应商属性必须在nonvendor属性之前进行像这样

-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
   -moz-transform: rotate(7.5deg);  /* FF3.5+ */
    -ms-transform: rotate(7.5deg);  /* IE9 */
     -o-transform: rotate(7.5deg);  /* Opera 10.5 */
        transform: rotate(7.5deg);

这些天我们应该使用-moz-border-radius属性吗？

5 个答案: