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这样的站点对于帮助您确定是否使用任何特定功能是非常有用的:它显示哪些浏览器和版本支持它,从而让您对是否使用它做出明智的决定。
最后,我可以给你建立一个网站跨浏览器的最重要的建议:在所有浏览器中测试它,并且你想支持的所有浏览器版本。 (不要假设,如果它在一个浏览器版本中工作,它可以在其他版本中工作 - 你需要全部测试它们)。
感谢您的帮助。我曾尝试将此代码用于我的视频框。 15 \t #showreel \t 100%不是箱子尺寸值:100%100%100%100%100% #showreel \t属性-moz-box-sizing不存在:100%100%100%100%100% #showreel \t物业-webkit-box-sizing不存在:100%100%100%100%100%#showreel \t 100%不是箱子尺寸值:100%100%100%100%100%那是行不通的。你能否给我一些建议,因为我在不同的浏览器上查看了我的网站,这在Safari浏览器上只有很好,但其他浏览器正在改变视频盒的布局。 – 2011-05-20 13:27:03