首页 > 代码库 > IE兼容性标签和条件注释

IE兼容性标签和条件注释

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8" /><title>无标题文档</title></head><body></body></html>

上文是一个简单的HTML文件里面的代码,下面我们来分析一下元信息中的 X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=10,IE=9,IE=8" />

上面这段代码的意思是强制开启兼容性视图,即以IE10、IE9、IE8的文档模式来解析,高于IE10时候以IE10来解析,低于IE8时候以原始版本解析。

 

在几乎没有用到IE新特性的时候直接把兼容性开到最低,比如需要兼容IE10、9、8的时候直接强制兼容性视图为IE8。而下面的情况下如果是IE10则以IE10解析,IE9则以IE8解析,可以发现标签中处于IE10和IE8之间的9被剔除掉了。

<meta http-equiv="X-UA-Compatible" content="IE=10,IE=8" />

在公司项目开发插件的过程中,由于公司有大华的相机设备,我也用了一下,发现在IE11下面无法正常使用,手动F12将兼容性视图调整为IE10,又可以正常使用。

不过开发的时候又有谁能提前想到IE11已经走向标准化,而不再是简单的IE内核,这里不再去深论这个话题。

 

讲讲第二个话题IE条件注释(IE5引入,目前IE10及10以上的版本不再支持条件注释)

由于我的IE已经是11的版本了,这里并没有对条件注释进行详细的测试,内容参考于《JavaScript权威指南6》第13章。有兴趣的朋友可以自己去测试。

html注释:

<!--[if IE 11]></br>this is ie11<![endif]--><!--[if gte IE 7]></br>this is >= ie7<![endif]--><!--[if IE]></br>this is IE<![endif]--><!--[if !IE]> <-->!IE<!--> <![endif]-->

javascript注释:

<script type="text/javascript">/*@cc_on @if (@_jscript)     // 该代码位于一条JS朱室内但在IE中执行它     alert(‘In IE‘); @end      @*/  /*@cc_on @if (@_jscript)    // 该代码位于一条JS朱室内但在IE中执行它     alert(‘In IE‘); @else*/     alert(is not in IE); /*@end @*/</script>

在非IE下 弹出消息框 is not in IE,在IE下则弹出了对话框 In IE。这里用到了能力检测  

@_jscript

是IE的javascipt解释器,总是为true(脚本中变量都能转换为0或1,true or false,表示存在这个变量,存在这种能力)

建议开发者在开发过程中尽量用能力检测代替浏览器检测。