关于IE兼容问题

针对IE6/7/8 可以分为两种模式:怪异模式(Quirks mode)和标准模式(Standards mode),在IE6以下版本下显示怪异模式,border和padding都包含在width中
使用IE7编译:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
也可以引进相应的js插件去解决html5和css3的问题,但是只能在小范围内或者单页中使用,代价是消耗性能

一、针对IE hack的技巧进行总结:
有四种方法: 1、条件注释法 2、类内属性前缀法 3、选择器前缀法 4、IE选择器前缀法

1、条件注释法
<!-- [if !IE] -->除了IE都兼容<!-- [endif] -->
<!-- [if IE] ->IE兼容 <!-- [endif] -->
<!-- [if IE6] -->IE6兼容 <!-- [endif] -->
<!-- [if lt IE6] -->IE6以下兼容 <!--[endif]-->
<!--- [if gte IE6] --> IE6及IE6以上兼容 <!--[endif] -->

lt:later than
lte: later than and equal
gt: greater than
gte: greater than and equal

2、类内属性前缀法
div{
-webkit-color:#ccc;/*Chrome and Safari*/
-ms-color:#ccc;/* IE */
-moz-color:#ccc;/* firefox*/
-o-color:#ccc;/Opera/
}
3、选择器前缀法
在上面介绍的两种方法基本上能解决80%的兼容性问题,一般不建议优先使用选择器前缀法,因为采用媒体查询的方法(需要CSS3支持)
@media screen and(-webkit-min-device-pixel-ratio:0) {
.class-name{
color:#ccc;/*Chrome and Safari*/
}
}
4、IE选择器前缀法
如果碰到IE8专属的hack使用上面的方法都没办法解决时,就可以使用这种方法了,前提是让IE6-IE8先支持媒体查询
/*IE8*/
@media \0screen{
.class-name {
color:#ccc;
}
}

IE6-IE11 全部兼容方法(从高版本写到低版本)
div{
color:#ccc;
color:#ccc\9; /*IE8-IE10*/
color:#ccc\9\0;/*IE9-IE10*/
+color:#ccc;/*IE7*/
_color:#ccc;/*IE6*/
}
@media screen and(-ms-high-contrast:none){
div{
color:#ccc;/*IE10-IE11*/
}
}
@media all and(-ms-hign-contrast:none) {
*::-ms backdrop,div{
color:#ccc;/*IE11*/
}
}
现在用的比较多的就是\9、\0,这是hack IE8、IE9、IE11的专属标识,但是有很多情况下\9、\0对hack IE8、IE9、IE11都不管用。
可能很多人知道\9是用来hack IE9的,\0是用来hack IE8、IE9、IE11的,但是很多情况下都不奏效,
其实IE11仅能识别\0,IE8、IE9能识别\0和\9,那么如何区分IE8和IE9呢?

但是在meta里面定义了meta="IE Edge”的话,IE11仅能识别\0,IE8 IE9能识别\0和\9,关键还是在区分IE8 和IE9,所以代码可以如下:
div{
  color:#ccc;
  color:#ddd\9;/*IE8 和 IE9*/
  color:#eee\0;/*IE11*/
}
/*IE9+*/
@media all and(min-width:0){
div{
  color:#f00\9;/*针对IE9,除去Chrome,360等浏览器和IE11*/
}
}

二、IE调试技巧
1、IE6-IE10大部分的div浮动问题都可以通过设置层的width、height和背景色(调试)解决
2、容器内有浮动层元素的,在容器末尾添加清除浮动属性。
3、使用IE-TEST和谷歌调试工具,IE8以下版本使用fire-bug的JS版本,IE8及以上的参考内置的调试工具(和实际效果显示不一样)
4、兼容性版本的和实际效果是有差距的
5、调试版本都从高到低版本进行调试,防止属性版本污染
6、调试过程中,依次从外围向里删除无关的HTML结构和CSS/JS,直到出现问题的赌坊
7、尽量少些hack,用其他方式可以避免则尽量避免


三、IE个版本的bug
1、IE6 margin双倍边距
在IE6中,浮动的div左右边上的margin会有双倍的值,解决方法:在这个div里添加display:inline;
2、IE6 图片下会有空白缝隙
解决方法:改变html的布局,设置img为display:block或者vertical-align:top|bottom|middle都可以解决
3、IE6无法定义1px左右高度的容器
主要是IE6下的默认行高造成的
解决办法:overflow:hidden|zoom:0.08|line-height:1px


posted @ 2017-03-27 12:02  AnAnZ2  阅读(170)  评论(2编辑  收藏  举报