-1

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

其次,我已经验证了我网站的 CSS 文件并得到了这些错误:

218 .box 属性边框半径在 CSS 级别 2.1 中不存在,但存在于:6px 6px 219 .box 属性 -moz-border-radius 不存在:6px 6px 220 .box 属性 -webkit-border-radius 不存在t存在:6px 6px。

但我也不知道如何解决这个问题。

http://www.harvestcreativemedia.com

4

3 回答 3

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 工作,你需要做一些 hack。目前最好的选择是CSS3Pie。您的另一种选择就是忽略它,让 IE 用户保持直角。由于这不会影响您网站的可用性,您可能会认为这是最简单的选择。

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

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

于 2011-05-19T12:14:07.343 回答
0

要修复网站跨浏览器,最好的方法是在开始时牢记这一点,并在开发中逐步检查每个浏览器是否存在差异并尝试找到跨浏览器解决方案。您也可以通过完成的网站来实现它,但当然要困难得多。如果您有特定问题,您可以使用 stackoverflow.com 来解决您遇到的任何编程问题。

关于您收到的错误是因为您尝试使用 css 2.1 标准验证 css 3 文件。访问http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options并在配置文件级别 3 css 处选择以验证 css 3。

于 2011-05-19T11:53:20.863 回答
0

一件好事是jquery圆角。它相当简单,几乎可以完成 css3 border-radius 所做的所有事情。缺点是创建一个边框,如果你想要一个 1px 的边框,你必须将你的目标 div 包装在另一个 div 中,并将外部设置为 1 px 的填充。

这是网站: http: //plugins.jquery.com/project/corners 下载 zip 包以查看演示。

这适用于所有浏览器和 IE6+,如果该浏览器存在正确的 css 属性,它也会调整它们。

于 2011-05-19T13:17:10.097 回答