\9和\0可能hack IE11\IE9\IE8无效原因详解
\9和\0为什么可能hack IE11\IE9\IE8无效?
可能很多人都略明白,\0是用来hack IE8、IE9、IE11的,而\9是用来hack IE9的。但有时你真正运用起来,它并不凑效。看下面的htML代码:
!DOCTYPE html> head> meta http-equiv="Content-type" content="text/html; charset=utf-8"/> tITle> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.COM/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#0000FF\0; /* 蓝色 */ background-color:#FFFF00\9; /* 黄色 */ } /style> /head> body> div class="content"> IE8 IE9 IE11均显示黄色/div> /body> /html>
上例中,\9和\0就达不到hack 各IE浏览器版本的目的。不过我们把 /* 蓝色 */ 和 /* 黄色 */ 这两行调换,又会怎样显示呢?请看html代码:
!DOCTYPE html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#FFFF00\9; /* 黄色 */ background-color:#0000FF\0; /* 蓝色 */ } /style> /head> body> div class="content"> IE11显示黄色,IE8 IE9 均显示蓝色/div> /body> /html>
结果是,IE11显示黄色,而IE8和IE9均显示蓝色。
上述两个例子说明,IE8、IE9都能读懂\9和\0标识,此两标识哪个写在后面就以哪个为准,而IE11仅能读懂\9标识。
至此,我们能否根据上述结论来写代码来hack IE8、IE9和IE11三个浏览器?显然是不可以的,至少你不可以hackIE8和IE9,仅能hackIE11。
如何hack IE8和IE9
那么,我们如何去hack IE8和IE9呢?这个就是问题的关键。
在此文 css区分ie8/ie9/ie10/ie11 chrome firefox的代码 中提到,IE9以上浏览器可以读懂此代码:
/* IE9+ */@media all and (min-width:0) { .divContent{ background-color:#eee; } }
我们用此代码结合前面的代码,是不是就可以hack IE8和IE11了?完整html代码如下:
!DOCTYPE html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#FFFF00\9; /* 黄色 */ background-color:#0000FF\0; /* 蓝色 */ } /* IE9+ */ @media all and (min-width:0) { .content{ background-color:#000; /* 黑色 */ } } /style> /head> body> div class="content"> IE11显示黄色,IE8 显示蓝色,IE9显示黑色。/div> /body> /html>
至此,IE8、IE9、IE11的兼容性问题就解决了。
不过,还没玩,因为 @media all and (min-width:0) 在 Chrome、Firefox、360等浏览器同样有效。所以,上面代码需要稍微修改下,在 @media all and (min-width:0) { } 里面的css语句同样加上\0标识,表示这是属于IE9的样式。修改后的完整代码如下:
!DOCTYPE html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#FFFF00\9; /* 黄色 */ background-color:#0000FF\0; /* 蓝色 */ } /* IE9+ */ @media all and (min-width:0) { .content{ background-color:#000\0; /* 黑色 */ } } /style> /head> body> div class="content"> IE11显示黄色,IE8 显示蓝色,IE9显示黑色。/div> /body> /html>
至此,IE8、IE9、IE11的兼容性问题就完美解决了。
meta声明属性 IE=Edeg 后,IE8\IE9\IE11的兼容代码
但是,如果网页HTML代码里声明了Meta元件 IE=Edge,那么上面的代码是不对的。
先看第一个html代码:
!DOCTYPE html> head> meta http-equiv="X-UA-Compatible" content="IE=Edge" /> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#0000FF\0; /* 蓝色 */ background-color:#FFFF00\9; /* 黄色 */ } /style> /head> body> div class="content"> IE11显示蓝色,IE8 IE9均显示黄色/div> /body> /html>
结果是,IE11显示蓝色,IE8 IE9均显示黄色,并非三个浏览器都显示黄色了。
这就说明,加了meta IE=Edge 这句,IE11不再能读\9这个标识。
我们再看如下代码:
!DOCTYPE html> head> meta http-equiv="X-UA-Compatible" content="IE=Edge" /> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#FFFF00\9; /* 黄色 */ background-color:#0000FF\0; /* 蓝色 */ } /style> /head> body> div class="content"> IE8 IE9 IE11 均显示蓝色/div> /body> /html>
execcodegetcode
结果是,IE8 IE9 IE11 均显示蓝色,这说明了,IE8 IE9 IE11 均能读懂\0这个标识。
结合上面两个例子,可以得出结论,加了meta IE=Edge 属性后,IE8 IE9能同时读懂\9和\0这两个标识,而IE11仅能读懂\0这个标识。
所以,我们可以据此来hack出IE11。如下html代码加以说明:
!DOCTYPE html> head> meta http-equiv="X-UA-Compatible" content="IE=Edge" /> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#0000FF\0; /* 蓝色 这个是给IE11的 */ background-color:#FFFF00\9; /* 黄色 这个是给IE8和IE9的 */ } /style> /head> body> div class="content"> IE11显示蓝色,IE8 IE9均显示黄色/div> /body> /html>
这样,我们再用上面的代码hack出IE8和IE9就可以了。
如何hack IE8和IE9 ?还是前面那个hack IE8 IE9的关键代码:
@media all and (min-width:0) { }
完整html代码这样写:
!DOCTYPE html> head> meta http-equiv="X-UA-Compatible" content="IE=Edge" /> meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> title> hack IE8/IE9/IE11_css实例_卡卡网 webkaka.com/title> style type="text/css"> .content{ width:400px; height:50px; color:#ccc; background-color:#FF0000; /* 红色 */ background-color:#0000FF\0; /* 蓝色 这个是给IE11的 */ background-color:#FFFF00\9; /* 黄色 这个是给IE8和IE9的 */ } /* IE9+ */ @media all and (min-width:0) { .content{ background-color:#000\9; /* 黑色 这个是给IE9的 */ } } /style> /head> body> div class="content"> IE11显示蓝色,IE8显示黄色,IE9显示黑色/div> /body> /html>
以上就是\9和\0可能hack IE11\IE9\IE8无效原因详解的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: \9和\0可能hack IE11\IE9\IE8无效原因详解
本文地址: https://pptw.com/jishu/583220.html