IE6兼容性大全(终极版)一

IE6兼容性大全(终极版)一

相信从事前端开发的朋友对IE6都是深恶痛绝,恨不得先杀后J,然后再大卸八块以解心头只恨。虽然是这么可恶的一个浏览器,但是IE6迄今为止的市场占有率仍然很高,截止2009年8月份的市场占有率仍然有25%之多。那么今天创意灵犀通过翻译国外的译文对IE6的兼容问题进行总结概括。难免有疏漏之处,如若您有更好的建议,欢迎在回复中提出,我会及时加以补充。

1.前言:

考虑浏览器的兼容性,我们要做的首先一定要简洁,如果你的布局太复杂,兼容性就更加难以做到。

其次,我们要实用合适的文档声明,因为没有声明的情况下,IE6会出现很多怪异的问题。W3CSCHOOL指出,XHTML1.0中文档声明包括以下三种:Frameset(框架型)、Transitional(过渡型)、Strict(严格型) 。而loose为HTML4.01的类型,并非XHTML的类型。我们最常用的通常是过渡型,示例代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

第三,当我们完成制作的时候要记得验证我们的代码,有些人认为校验代码没有任何实用价值,但我不这么认为。校验仅仅只需花费一点点时间,而且将受益于所有浏览器而非仅仅IE6;验证确保了向后兼容并且易于维护。至少也得验证XHTML!

第四,实用渐进增强,即在适当的时候保留一些不兼容浏览器的基本功能,至少不影响用户体验到网站要表现的内容。

最后是如何测试我们的网站,在FF下我们可以使用功能强大的Firebug,可以方便的对网站的CSS及网站结构进行精确快速的运行时查看,甚至对JS设置断点。而IE下我们的工具相对较为贫乏,但是我们可以使用IETester来测试不同IE版本的显示效果,IETester的开发者也提供了DebugBar这款IE插件免费供个人使用,但商业用户只可试用60天。

2.对IE6单独兼容

兼容IE6的第一步就是单独对IE进行兼容,你针对IE6所写的代码只影响IE6;有几种方法可以区分开IE6:IE特有条件注释、CSS选择器、JavaScript,网上这方面的资源非常丰富。具体的方法这里不再赘述。

3.IE6里的图片问题

3.1 PNG半透明图片

有很多JavaScript解决方案来修复IE6使用PNG-24图片,可以从互联网上获得相关信息。另外一个办法是使用IE特有的滤镜

3.2 IE6下的CSS圆角。

具体实现方法,可以参看http://www.virtuosimedia.com/tutorials/css-rounded-corner-menus 不使用JS的方法,解决IE下圆角问题。

3.3 IE6下背景闪烁问题。

如果你给链接、按钮用CSS sprites作为背景,你可能会发现在IE6下会有背景图闪烁的现象。造成这个的原因是由于IE6没有将背景图缓存,每次触发hover的时候都会重新加载,可以用JavaScript设置IE6缓存这些图片:

document.execCommand("BackgroundImageCache",false,true); 

 当然,这里创意灵犀也给出一种自己的解决方法,就是使用背景的split。将两个要切换的背景放在一张图片中,通过css的backgroun-position来实现同时加载。具体效果可以参看本站首页 青岛网站建设 中的24小时客服按钮。

看过本文的读者还看了:

IE6兼容性大全(终极版)三

IE6兼容性大全(终极版)二