3

我正在使用W3C CSS 验证服务来验证 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;
4

5 回答 5

11

Firefox从版本 4 开始理解标准化border-*-radius属性。

如果您要为所有四个角指定相等的半径，并且您对支持 Firefox < 4.0 和其他较旧的浏览器不感兴趣，那么您不妨将惊人的八个边框半径声明减少到一个：

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

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

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

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

1 是的，供应商确实以不符合标准的方式实现了前缀属性，因为规范中没有任何内容说他们不能。有关Mozilla 删除前缀后发生的变化的详细信息，请参阅Gecko 说明。-moz-border-radius

于 2012-05-09T15:06:46.713 回答
2

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

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

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

于 2012-05-09T15:06:57.557 回答
1

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

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

于 2012-05-09T15:09:36.720 回答
0

供应商属性必须写在像这样的非供应商属性之前

-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);
于 2012-05-09T15:11:33.903 回答
0

对于现代版本的 firefox no..

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

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

于 2012-05-09T15:08:44.873 回答