2011-05-19 22 views
-1

我是新来的网页设计,我的网站有一些问题。首先,它不是一个跨浏览器兼容的网站。我想这样做,但我不知道如何做到这一点。我已阅读了一些关于此的文章,但他们没有得到任何帮助。请告诉我如何设计一个跨浏览器的网站。属性border-radius在CSS级别2.1中不存在,但存在于:6px 6px

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

218 .box的财产边界半径不CSS水平2.1存在,但在存在:6像素6像素 219 .box的属性-moz -border-radius不存在:6px 6px 220 .box属性-webkit-border-radius不存在:6px 6px。

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

http://www.harvestcreativemedia.com

回答

0

要解决一个网站的网站跨浏览器的最好方式是通过发展步伐与此启动它在思想和步骤来检查任何区别每个浏览器,并试图找到一个跨浏览器的解决方案。你也可以通过一个完成的网站来实现它,但当然要困难得多。如果你有特定的问题,你可以在任何编程问题上使用stackoverflow.com获得帮助。

关于您得到的错误是因为您尝试使用css 2.1标准来验证css 3文件。去http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options并选择配置文件级别3 css来验证css 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工作,你将需要做一些黑客攻击。目前最好的选择是CSS3Pie。你的另一个选择就是忽略它,让IE用户保留方角。由于这不会影响您网站的可用性,因此您可以决定这是最简单的选择。

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

最后,我可以给你建立一个网站跨浏览器的最重要的建议:在所有浏览器中测试它,并且你想支持的所有浏览器版本。 (不要假设,如果它在一个浏览器版本中工作,它可以在其他版本中工作 - 你需要全部测试它们)。

+0

感谢您的帮助。我曾尝试将此代码用于我的视频框。 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

0

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

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

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