百度空间 | 百度首页 
               
 
查看文章
 
[转载]IE7.0RC1,CSS兼容(ie6,ff浏览器)解决方案
2008年05月21日 星期三 10:09

IE7.0RC1,CSS兼容(ie6,ff浏览器)解决方案

首先声明在我这篇文章发表时,IE7.0及以上目前有四个版本,分别是Ie7.0beta1,Ie7.0beta2,Ie7.0beta3,Ie7.0 RC.
这四个版本本身也存在对CSS兼容的不同。特别是beta1,beta2与RC版本的有很大差异。
通过我自己对IE7.0RC做的测试。发现IE7RC已经解决了许多在IE6存在的bug,比如使用左漂浮并且使用了margin-left,此margin的数值加倍bug.还解决了IE6.0不认!important优先权的问题,此外还有比如两DIV之间margin,padding都已经被置0.
但是如果相邻的那个DIV使用的文本对象,文本对象会自动产生3px空隙,类似这种很多细节bug都在IE7RC中有了好的解决。
下面要继续谈如何使你的页面通过IE7RC的测试。在谈这个话题前,请容我在这里发句牢骚:还有什么比在多个不同浏览器上测试CSS更痛苦的事情? 那就是在多个不同浏览器的多个不同版本上测试CSS!
因为有最新消息放出IE7在这个月应该还会放出一个RC(Release Candidate)版本,(具体情况请参考:IE7 TEAM BLOG
http://blogs.msdn.com/ie/),在我们不知道最新的之前,暂且以下都以IE 7.0.5700.6 Release Candidate为准。
IE 7.0.5700.6 Release Candidate下载地址:立即下载:
http://download.microsoft.com/download/4/0/3/403bc6de-95d9-4996-aa4b-28f47d2d55dd/IE7RC1-WindowsXP-x86-enu.exe

注意!此IE7.0安装后重新启动后可能导致你无法进入WINDOWS,如果你使用了已破解的WINDOWS或正版WINDOWS(即你当前所在系统可在线更新WINDOWS系统的)就可以放心安装。
安装后,它会直接覆盖IE6.0。也就是说你就暂时不能用IE6.0浏览器了。(如果你是测试或开发人员,要同时在IE6和IE7
下测试你的页面,本站提供一个方法给你:通过此链接:http://browsers.evolt.org/?ie/32bit/standalone可以下载IE各版本的独立版本的IE浏览器(包括ie3_9x.zip,ie4_9x.zip,ie501sp2_nt.zip,ie55sp2_9x.zip,ie6eolas_nt.zip)可以下载IE6.0独立运行版本,这样让你在本机本地能同时启动IE6.0和IE7.0)。

以上谈到了关于IE7.0的安装与解决本机同时运行IE6和IE7的解决方法。下面我们谈关于IE7.0RC的CSS兼容解决方法:
兼容在这里主要以兼容IE6.0及以上版本,兼容Firefox1.5以上,这都是主流,至于其他浏览器有兴趣的朋友我们可以在网下或QQ上交流。

要做到兼容,主要有3种解决方案:1.条件注释。2.JS。3。CSS hack。第1种需要在HTML里才有效,还要对特定浏览器准备特定CSS,所以不好管理。第2种同样需要准备两套以上CSS。第3种虽然W3C不推荐不支持,但是现在被大多数开发者所用。
现在IE6和IE7以及FF对盒模型解释大致是一致的,都是盒实际宽度=盒内容宽度+内补丁值+边框宽度。主要差异还是在一些细节上。比如IE6.0的margin双倍问题,这样的话在写CSS或搭建XHTML结构时候尽量去写兼容性地,可扩展性的代码和结构定义,避免BUG的出现,避免BUG条件的产生,预防隐患存在的不兼容性。
最后,谈到很重要的一点,CSS几乎无所不能,CSS hack更是无所不能。恰当综合使用CSS规则和CSS hack可以修正不同浏览器的显示细节的错位。例如我们对同样一个盒定义他的内容宽度:
.div{width:150px!important;>width:200px!important;width:600px;}
这样一句定义,这个盒的实际宽度在FF中是150px,而在IE7.0RC中是200px,在IE6.0中是600px.
为什么呢??
因为FF认识!important;并遵循其优先权,但是中间的值前面有个>,所以FF忽略它,这样最后FF中就是150px;
而IE7.0RC也认识!important;,同时也认识>,所以将后面一个!important;将前面一个覆盖掉,以最后一个为准。
而IE6.0不管!important;只认最后一个值。

知道了这,我想基本上这三个主要浏览器的兼容基本上没太大问题了。


类别:Css | 添加到搜藏 | 浏览() | 评论 (0)
 
最近读者:
 
网友评论:
发表评论:
姓 名:
网址或邮箱: (选填)
内 容:
验证码: 请点击后输入四位验证码,字母不区分大小写
      

     

©2009 Baidu