属性 border-radius 在 CSS 级别 2.1 中不存在，但存在于： 6px 6px
我是网页设计新手，我的网站存在一些问题。 首先，它不是一个跨浏览器兼容的网站。我想做到这一点，但我不知道该怎么做。我读过一些有关此的文章，但它们没有任何帮助。请告诉我如何设计一个跨浏览器网站。
其次，我验证了网站的 CSS 文件并收到以下错误：
218 .box 属性 border-radius 在 CSS 级别 2.1 中不存在，但存在于： 6px 6px
219 .box 属性 -moz-border-radius 不存在：6px 6px
220 .box 属性 -webkit-border-radius 不存在：6px 6px。
但我也不知道如何解决这个问题。
I am new to web design and I have some problems in my website.
First, it is not a cross-browser compatible website. I want to make it so, but I don't know how to do this. I have read some articles about this, but they have not been any help. Please tell me how I can design a cross-browser website.
Second, I have validated my website's CSS file and gotten these errors:
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.
But I don't know how to solve this either.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
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，则需要进行一些修改。目前最好的选择是 CSS3Pie。您的另一个选择是忽略它并让 IE 用户看到方角。由于这不会影响您网站的可用性，因此您可能会认为这是最简单的选择。
所有浏览器和浏览器版本都有自己支持的功能组合。像 CanIUse.com 这样的网站对于帮助您确定是否使用任何给定功能非常有用：它显示了哪些浏览器和版本支持它，让您可以就是否使用它做出明智的决定。
最后，关于制作跨浏览器网站，我可以给您的最重要的建议是：在所有浏览器以及您想要支持的所有浏览器版本中进行测试。 （不要仅仅假设如果它在一个版本的浏览器中工作，它也会在其他版本中工作 - 您需要对它们进行全部测试）。
border-radiusis a CSS3 property, so if you're validating as CSS2, it will report errors.-moz-border-radiusand-webkit-border-radiusare "vendor prefixed" versions of the same property. Vendor prefixes are given by the browser makers to features which they have implemented, but which either are not yet standardised or else their implementation of it is not yet complete. Either way, it allows a site designer to use the feature before it is officially ready.If you're designing a cross-browser site, you need to consider which browsers to include. For example, do you want to take time making it work in very old versions of browsers (which perhaps no-one is using any more)? You need to decide which older versions to support.
This is relevant to
border-radiusbecause current versions of Firefox, Chrome and Safari all supportborder-radiuswithout the vendor prefix. In fact, the vendor prefix hasn't been required for several versions, particularly for the Webkit browsers. So you may be perfectly justified in dropping those prefixed declarations. You need to check which versions of which browsers require them, and decide whether you want to support those browsers.Another factor to consider is that until very recently, IE did not support
border-radiusat all, not even with a vendor prefix. IE9 does support it, but most IE users are still running IE8.If you want
border-radiusto work for IE, you will need to do some hacks. The best option at the moment for this is CSS3Pie. Your other option is just to ignore it and leave IE users with square corners. Since this won't affect the usability of your site, you may decide this is the easiest option.All the browsers and browser versions have their own combination of features which they support. A site like CanIUse.com is invaluable for helping you determine whether or not to use any given feature: it shows which browsers and versions support it, allowing you make an informed decision about whether to use it or not.
Finally, the most important piece of advice I can give you for making a site cross-browser: Test it in all browsers, and all browser versions that you want to support. (don't just assume that if it works in one version of a browser it'll work in other versions - you need to test them all).
要修复网站跨浏览器的问题，最好的方法是从这一点开始，逐步开发，检查每个浏览器是否有任何差异，并尝试找到跨浏览器解决方案。您也可以通过完成的网站来实现它，但当然要困难得多。如果您有具体问题，可以使用 stackoverflow.com 来帮助解决您遇到的任何编程问题。
您收到的错误是因为您尝试使用 css 2.1 标准验证 css 3 文件。访问 http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options 并在配置文件级别 3 中选择 css 以验证 css 3。
To fix a website website cross browser the best way is to start it with this in mind and step by step in development to check each browser for any difference and try to find a cross browser solution. You can achieve it with a finished website also but of course it is much more difficult. If you have specific question you can use stackoverflow.com for help in any programming issue you have.
About the errors you get is because you try to validate a css 3 file with css 2.1 standards. Go at http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options and select at profile level 3 css to validate for css 3.
值得研究的一件好事是 jquery 圆角。它相当简单，几乎可以完成 css3 border-radius 所做的所有事情。缺点是创建一个边框，如果你想要一个 1px 的边框，你必须将你的目标 div 包裹在另一个 div 中，并将外部设置为 1 px 的填充。
这是网站： http://plugins.jquery.com/project/corners
下载zip包查看demo。
这适用于所有浏览器和 IE6+，它还会调整正确的 css 属性（如果该浏览器存在这些属性）。
A good thing to look into is jquery rounded corners. it's rather simple and does almost everything that css3 border-radius does. The downside is creating a border,if you want a 1px border you would have to wrap your target div in another div and set the outer to a padding of 1 px.
here is the site: http://plugins.jquery.com/project/corners
download the zip package to view the demo.
This works on all browsers and IE6+, it also adapts correct css properties if they exist for that browser.