《如何解决IE兼容性问题》由会员分享，可在线阅读，更多相关《如何解决IE兼容性问题（14页珍藏版）》请在金锄头文库上搜索。
1、如何解决IE兼容性问题所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况，在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。随着浏览器版本的增多，解决IE浏览器兼容性显得尤为重要.一、important （功能有限）随着IE7又important的支持,important方法现在只针对IE6的兼容.（注意写法.记得该声明位置需要提前.）例如：#example width: 100Px important; /* IE7+FF */width: 200px; /* IE6 */ 二、CSS
2、 HACK勺方法（新手可以看看，高手就当路过吧）首先需要知道的是：所有浏览器通用height: 100px;IE6 专用 _height: 100px;IE7 专用 *+height: 100px;IE6、 IE7 共用 *height: 100px;IE7、FF 共用 height: 100px important;例如：#example height:100px; /* FF */* html #example height:200px; /* IE6 */*+html #example height:300px; /* IE7 */下面的这种方法比较简单举几个例子：1、IE6 - IE7
3、+FF#example height:100px;/* FF+IE7 */_height:200px;/* IE6 */其实这个用上面说的第一种方法也可以#example height:100Px Important; /* FF+IE7 */height:200px; /* IE6 */ 2、IE6+IE7 - FF#example height:100px;/* FF */*height:200px; /* IE6+IE7 */3、IE6+FF - IE7#example height:100px;/* IE6+FF */*+height:200px; /* IE7 */4、IE6 IE7
4、 FF 各不相同#example height:100px;/* FF */_height:200px;/* IE6 */*+height:300px; /* IE7 */或：#example height:100px;/* FF */*height:300px; /* IE7 */_height:200px;/* IE6 */需要注意的是，代码的顺序一定不能颠倒了，要不又前功尽弃了。因为浏览器在解释所以我们程序的时候，如果重名的话，会用后面的覆盖前面的，就象给变量赋值一个道理，把通用的放前面，越专用的越放后面解释一下4的代码：读代码的时候，第一行 height:100px;大家都通用，IE6
5、 IE7 FF 都显示100Px到了第二行*height:300px; FF不认识这个属性，IE6 IE7都认，所以FF还显示100px,而IE6 IE7把第一行得到的height属性给覆盖了，都显示 300Px到了第三行_height:200px;只有IE6认识，所以IE6就又覆盖了在第二行得到的height,最终显示200Px这样，三个浏览器都有自己的height属性了，各玩各的去吧这样说要是你还不明白，要么你去撞墙，要么我去 ！不过还是你去比较好。哦，差点忘了说了：*+html对IE7的兼容必须保证HTML部有如下声明：！DOCTYPE HTML PUBLIC -/W3CDTD HTML
6、 4.01 TransitionalENhttp:/www.w3.org/TR/html4/loose.dtd 三、使用IE专用的条件注释!-其他浏览器-link rel=stylesheet type=text/css href=css.css /!-if IE 7!- 适合于 IE7 - link rel=stylesheet type=text/css href=ie7.css /!endif- !-if lte IE 6!- 适合于IE6及以下-link rel=stylesheet type=text/css href=ie.css /!endif- 貌似要编三套css ,我还没用过
7、，先粘过来再说IE的if条件Hack1. !-除 IE 外都可识别!- !endif- 2. 所有的 IE 可识别 !endif- 3. !-if IE 5.0 只有 IE5.0 可以识别!endif- 4.!-if IE 5 仅 IE5.0 与 IE5.5 可以识别!endif- 5. !-if gt IE 5.0 IE5.0 以及 IE5.0 以上版本都可以识别！endif- 6. !-if IE 6仅 IE6 可识别!endif-7. !-iflt IE 6 IE6 以及 IE6 以下版本可识别!endif- 8. !-if gte IE 6IE6以及IE6以上版本可识别!endif-9
8、. !-if IE 7仅 IE7 可识别!endif-10. !-iflt IE 7IE7以及IE7以下版本可识别!endif-11. !-if gte IE 7 IE7 以及 IE7 以上版本可识别!endif- 注:gt = GreatThen大于大于号lt = Less Then 小于= 小于号gte = Great Then or Equal大于或等于Ite = Less Then or Equal 小于或等于四、css filter 的办法(据作者称是从国外某经典网站翻译过来的说)新建一个css样式如下：#item width: 200px;height: 200px;backgro
9、und: red;新建一个div,并使用前面定义的css的样式：div some text here /div 在body表现这里加入lang属性，中文为zh:body lang=en 现在对div元素再定义一个样式：*:lang(en) #itembackground:green important;这样做是为了用important 覆盖原来的css样式，由于：lang选择器ie7.0并不支持, 所以对这句话不会有任何作用，于是也达到了 ie6.0下同样的效果，但是很不幸地的是，safari同样不支持此属性，所以需要加入以下 css样式：#item:empty background: gre
10、en important:empty选择器为css3的规范，尽管safari并不支持此规范，但是还是会选择此元素， 不管是否此元素存在，现在绿色会现在在除ie各版本以外的浏览器上。五、FLOAT用合（clearing float ）网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合，这也是div无法自适应高度的一个原因。如果父 div没有设float而其子div却设了 f loat的话，父div无法包住整个子 DIV,这种情况一般出现在一个父 DIV下包含多个子 DIV。 解决办法：1、给父DIV也设上float（不要骂我，我知道是废话）2、在所有子 DIV后新加一个
11、空DIV（不推荐，有些浏览器可以看见空DIV产生的空隙）比如：.parentwidth:100px;.son1float:left;width:20px;.son2float:left;width:80px;.clearclear:both;margin:0;parding0;height:0px;font-size:0px;div class=parent div class=son1 /div div class=son2 /div div class=clear /div /div 3、万能float 闭合将以下代码加入Global CSS中，给需要闭合的div加上class= clea
12、rfix ”即可屡试不爽.代码：style /* Clear Fix */.clearfix:after content:.;display:block;height:。;clear:both;visibility:hidden;.clearfix display:inline-block;/* Hide from IE Mac */ .clearfix display:block; /* End hide from IE Mac */* end of clearfix */style :after（伪对象），设置在对象后发生的内容，通常和content配合使用，IE不支持此伪对象，非Ie浏览
13、器支持，所以并不影响到IE/WIN浏览器。这种的最麻烦。4、overflow:auto（刚看到的，极力推荐）只要在父DIV的CSS中加上overflow:auto就搞定。举例：.parentwidth:100px;overflow:auto.son1float:left;width:20px;.son2float:left;width:80px;div class=parent div class=son1 /div div class=son2 /div /div 作者原话：原理是，外围元素之所以不能很好的延伸，问题出在了overflow 上，因为overflow 不可见（见 W3c勺解释）
14、。现在只要将给外围元素添加一个overflow:auto :就可以解决问题，结果是除了IE,真的可以解决。下来就要解决 IE的问题了，再加上“ _height:1% ”，这个问题就完全解决了。我试了一下，其实不加_height:1% “在IE下也行，留着吧。六、需要注意的一些兼容细节1, FF下给div 设置padding 后会导致width 和height 增加（DIV的实际宽度=DIV 宽+Padding）,但 IE 不会.解决办法：给DIV设定IE、FF两个宽度，在IE的宽度前加上IE特有标记* 号。2,页面居中问题.body TEXT-ALIGN: center; 在 IE 下足够了，但 FF 下失效。解决办法：加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;3,有的时候在IE6上看见一些奇怪的间
