当多啦A梦遇到IE浏览器
作者：刘康乐

很Q的一个多啦A梦的GIF图吧，但日本某神人居然用CSS3 画出来了（不信大家可以打开试试，地址是：http://blog-imgs-42-origin.fc2.com/s/h/o/shopdd/dora_css3.html）。

哦，忘了提醒选择合适的浏览器了，否则会很悲剧的！下面是四个主流浏览器打开该页面的截图（这个多啦A梦大概是2010年7，8月份放出来的）：

其中，Chrome 的支持度最高，不仅圆角、阴影一应俱全，甚至连眼睛都还会动。

Firefox 3.6 次之，除了眼睛不会动之外都和 Chrome 相当。

Opera 则是少了阴影。

IE8下，那是整形失败……

波堤狮测试各浏览器对css3的支持效果

不止如此，台湾也有牛人，用css3画了一幅波堤狮，这次还多使用了@font-face（外部文字定义）的技术，援引网络字型来让页面呈现的文字更美观，更加入了 keyframes Animate（主框架动态）的动画效果，让波提狮摇摇尾巴（仅支持使用 Webkit内核的Chrome & Safari）。各浏览器下渲染的效果如下：

把IE6、7、8、9都加进来了。

IE9还算差强人意吧。

IE8也不说了。

IE7，那是拿枪自杀。

还有IE6，除了能看见在哭，看不出是什么来了。

跨浏览器兼容是个永恒的话题

好玩吧，但也正是这给web开发者带来了无尽的苦处。浏览器兼容，一个永恒的话题。先看看常见的css兼容问题：

1. IE6的双倍边距，在设置float的div下，margin会乘2。

2. IE6下PNG透明的问题。

3. 文字大小不兼容，设置font-size:12px的文字在各个浏览器下所占的空间是不同的，这个得看一下基线、中线、底线、顶线的定义。

4. 高度限定的问题—IE是自增长的，没有max-height，min-heiht等，而其它浏览器不同。

5. 还有IE的吞吃现象，因而诞生了zoom。

6. Img下的留白问题，包裹img的div必须得紧贴着，否则就留白。

7. 更离谱的是IE6下注释也能产生bug。所以大家都爱这么注释了：多出来的一只猪。

……

还是一些js的：

1. 处理键盘按键事件时，W3C可以直接访问对象的keycode属性，而IE需要用一个单独的全局事件对象window.event。

2. 停止事件冒泡方法，IE跟W3C也不同。

3. 绑定事件对象，除了传统的绑定，W3C和IE各有自己不同的绑定方式，但IE不支持事件捕获。

4. IE事件绑定时，事件监听函数内部的this 关键字指向window 对象，而非当前函数（这个被指是IE的巨大败笔）。

完美的浏览器兼容可能真的会很难实现，或者根本不可实现。但近似的兼容还是必需的，有些跨浏览器的编码技巧和准则如能掌握还是不太难实现的（前人总结的，并有详细的讲解，不便搬过来，给个链接，请点这）：

1. 理解css盒子模型

2. 理解block级和inline对象的区别

3. 理解float和clear属性

4. 首先对IE进行测试

5. 知晓IE浏览器常见的问题

6. 永远都不要指望所有浏览器都一模一样

7. 使用css清零

回顾一下IE浏览器的历史

不只兼容性上，页面解析速度，稳定性，还有占资源大小，IE真的被firefox、chrome落下太远。但在很久很久以前，IE占胜了Netscape，来到了这个世界上，而且还很强大很强大。IE3是第一款支持css的浏览器，IE4已达到了极快的渲染速度，并且是跨平台的，IE5就已经引入了XMLHttpRequest （没错，就是以后的ajax），微软靠其强大的创新优势抢占近乎95%的市场占有率（包含垄断的途径），以为高枕无忧，从此，微软放弃了创新，甚至于IE的开发停止了5年时间。

现在微软早已醒悟，新发布的IE9已近乎完美的兼容html5了，硬件加速功能也令人惊讶。但市场占用率从95%滑落到现在的不足50%已经很值得让他们思考，创新才有出路。不只他们，我们程序开发者也得明白这一点，不然真会out的！