css - 属性 border-radius 在 CSS level 2.1 中不存在，但在 : 6px 6px 中存在

Question

我是网页设计新手，我的网站存在一些问题。 首先，它不是一个跨浏览器兼容的网站。我想这样做，但我不知道该怎么做。我已经阅读了一些关于此的文章，但它们没有任何帮助。请告诉我如何设计一个跨浏览器的网站。

其次，我验证了我网站的 CSS 文件并发现了这些错误:

218 .box Property border-radius doesn't exist in CSS level 2.1 but exists in : 6px 6px
219 .box Property -moz-border-radius doesn't exist : 6px 6px
220 .box Property -webkit-border-radius doesn't exist : 6px 6px.

但是我也不知道怎么解决。

http://www.harvestcreativemedia.com

Answer 1

border-radius 是 CSS3 属性，因此如果您验证为 CSS2，它将报告错误。

-moz-border-radius 和 -webkit-border-radius 是同一属性的“供应商前缀”版本。供应商前缀由浏览器制造商提供给他们已实现的功能，但这些功能尚未标准化或尚未完成。无论哪种方式，它都允许网站设计者在正式准备就绪之前使用该功能。

如果您正在设计跨浏览器站点，则需要考虑要包含哪些浏览器。例如，您是否愿意花时间让它在非常旧版本的浏览器(可能没有人再使用)中工作？您需要决定支持哪些旧版本。

这与 border-radius 有关，因为当前版本的 Firefox、Chrome 和 Safari 都支持没有供应商前缀的 border-radius。事实上，几个版本都不需要供应商前缀，尤其是 Webkit 浏览器。因此，您可能完全有理由删除那些带前缀的声明。您需要检查哪些浏览器的哪些版本需要它们，并决定是否要支持这些浏览器。

另一个需要考虑的因素是，直到最近，IE 根本不支持 border-radius，甚至不支持供应商前缀。 IE9 确实支持它，但大多数 IE 用户仍在运行 IE8。

如果你想让 border-radius 为 IE 工作，你需要做一些 hack。目前最好的选择是 CSS3Pie .您的另一个选择是忽略它并让 IE 用户使用方 Angular 。由于这不会影响您网站的可用性，您可能会认为这是最简单的选择。

所有浏览器和浏览器版本都有它们自己支持的功能组合。像 CanIUse.com 这样的网站对于帮助您确定是否使用任何给定功能非常宝贵:它显示哪些浏览器和版本支持它，让您就是否使用它做出明智的决定。

最后，关于制作跨浏览器站点，我可以给你的最重要的一条建议是:在所有浏览器和你想要支持的所有浏览器版本中对其进行测试。 (不要只是假设如果它在一个版本的浏览器中工作，它也会在其他版本中工作——你需要测试所有的版本)。