用css画哆啦A梦：IE画不好 VS Webkit在作弊

1.IE画不好Webkit我最强

某日本高手用 css3 画了机器猫哆啦A梦。点击这里进入查看具体的现实效果。如果你查看页面源代码的话会发现这一切全部是css写的。

有意思的是由于不同的浏览器对 css3 的支持程度不同，效果也大不相同，上面即是不同的浏览器对比图：

四个浏览里面 Chrome 的支持度最高，不仅圆角、阴影一应俱全，甚至连眼睛都还会动 @@；Firefox 3.6 次之，除了眼睛不会动之外都和 Chrome 相当；Opera 则是少了阴影；至于 IE8… 呃… IE9 什么时候出来？
以上是来至谷奥（http://www.google.org.cn/）的信息。

在这个测试里，谷歌Chrome浏览器稳拿第一，而占据市场主流份额的IE浏览器基本上一败涂地（详见后文截图），连最新的IE9测试版也不例外。

2.Webkit在作弊,IE被耍了
 

总之，就是这么一件让Chrome粉丝们扬眉吐气的事情，现在却出现了一些不同的声音。有人指责这个测试用到了偏向性代码，Chrome、Safari等浏览器实际上存在作弊行为。这到底是怎么回事呢？请看下图：

上面两张图是这个CSS3浏览器测试页面的测试结果，从近一年来的浏览器内核大战的角度来看，此网页所表达的意思就是：使用Webkit引擎的Safari 和 Chrome 对CSS3的支持最好，Firefox其次，因为Firefox无法实现CSS3的动画效果（即哆啦A梦的眼睛移动动画渲染失败），其他浏览器CSS3渲染的表现则很差。但事实真的是这样吗？

有热心的网友打开了这个演示的源码，想一窥究竟，结果让人大吃一惊：

下面部分的代码是实现哆啦A梦眼睛转动的代码：

注意图中红框出，-webkit- 开头的属性。就是哆啦A梦的黑色眼睛部分的CSS3移动特效，据闻这是被指定了webkit 内核only，即只有使用webkit 内核的chrome 和 Safari 可以使用。IE之类默认根本就不支持这个特性，其结果可想而知。

实际上，不管Firefox也好，IE也好，浏览器都有很多独有的特性，要写一个其他浏览器不能渲染的页面太容易了。在演示CSS标准的时候使出这招，不给出任何说明，不知道高手们怎么看待这个问题。

Tips:

解释下关于浏览器独有的CSS特性

比如Mozilla浏览器支持一些扩展的CSS是以-moz开头的。这些措施包括了一些功能，包括圆形边界，并能够指定不同的方块的宽度和高度的计算，在非标准方式下，这种css在Mozilla浏览器下执行计算更容易得到支持。

当然我们也能看到在其他CSS代码部分，比如face部分如下图红框处，也给出了针对 mozila 和 一般处理方式的代码，唯独上面的眼睛处，我只看到webkit 内核指定。具体缘由小编我不是高手，还请各位指教了（也许只是考虑到Mozilla的内核 不支持而删掉了代码吧）。

以上信息来自爱活网（http://www.evolife.cn/）

不知道CB诸君怎么看待这个问题，希望高手给个解释。

此页面提供的文件均通过正版NOD32杀毒软件(病毒库日期：2010-05-29)扫描无毒，请放心使用，但也烦请您在下载后再次查毒确保文件安全，如本文件对您的计算机造成危害，本站无需承担责任。Flyspace欢迎网友复制，转载和演绎文章内容，但请遵守署名-非商业性-相同方式共享协议