IE浏览器之条件性注释IF IE(Conditional comments)

发表于:
来源:阿酷技术学习
作者:simplefastbest

在IE10以前浏览器中,都提供一种功能叫做条件性注释,你可以提供功能以区别于其它的浏览器,这是一种只有IE才能识别的标记,其它的浏览器根本不能识别这种标记。

这种标记的写法,主要有两种注释方法.

downlevel-hidden,下级隐藏

<!--[if expression]> HTML <![endif]-->

原理,IE5以下,以及其它非IE浏览器不支持条件性注释,被作为注释语句,所以隐藏.对IE5-IE9,能正确识别标记,根据标记表达式的条件,来确定内容是否显示.

downlevel-revealed,下级显示

<![if expression]> HTML <![endif]>

原理:IE5以下,及其它浏览器虽然不能识别标记,但能识别内容,所以显示.对IE5-IE9,能正确识别标记,根据标记表达式的条件,来确定内容是否显示.

条件表式写法:

项目示例说明
IE[if IE]字符串 "IE" 是一种对应于用以浏览网页的 Internet Explorer 的版本的一种特性。
value[if IE 7]一个对应于浏览器版本的整数或浮点数。返回一个布尔值,版本号和浏览器版本相匹配时为 true。更多信息参见版本向量(en:Version vector)。
WindowsEdition[if WindowsEdition]适用于 Windows 7 上的 Internet Explorer 8。字符串 "WindowsEdition" 是一种对应于用以浏览该网页的 Microsoft Windows 版本的特性。
value[if WindowsEdition 1]一个对应于用以浏览该网页的 Windows 的版本的整数。返回一个布尔值,数值和使用的版本相匹配时为真 true。关于所支持的值和它们所描述的版本的更多信息,参见GetProductInfo 函数的pdwReturnedProductType参数。
true[if true]永远等价于 true.
false[if false]永远等价于 false.

可用于创造条件注释的算符如下表。

项目示例说明
![if!IE]NOT 运算符。这被放在特性,算符, 或者子表达式的前面以反转该表达式的布尔值含义。
lt[if lt IE 5.5]小于运算符。第一项小于第二项时返回 true。
lte[if lte IE 6]小于或等于运算符。第一项小于或等于第二项时返回 true。
gt[if gt IE 5]大于运算符。第一项大于第二项时返回 true。
gte[if gte IE 7]大于或等于运算符。第一项大于或等于第二项时返回 true。
( )[if!(IE 7)]子表达式运算符。用以连接布尔算符以创造更加复杂的表达式。
&[if (gt IE 5)&(lt IE 7)]AND 运算符。所有子表达式为真时返回 true。
|[if (IE 6)|(IE 7)]OR 运算符。子表达式任意一个为真时返回 true。

实战案例

1,IE 提供的 if IE 语句可以让开发者很方便地根据 IE 版本来加载资源,然而 if IE 语句只支持到 IE9 ,不能使用在 IE10 和 IE11 之中。那么问题来了,没有 if IE 怎么判断是不是 IE10 ?

2,@cc_con 支持到ie10

所以代码如下

IE 10 及以下版本提示升级(使用只有IE10及旧版IE支持的条件编译实现):

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

IE 9 及以下版本提示升级:

<!--[if lte IE 9]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

IE 8 及以下版本提示升级:

<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

对于大于IE9,或者非Ie,想引入额外可以这样写:

<!--[if (gte IE 9)|!(IE)]><!--><script src="assets/js/jquery.min.js"></script><!--<![endif]-->

参考:

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/ms537512(v=vs.85)?redirectedfrom=MSDN

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/compatibility/hh801214(v=vs.85)?redirectedfrom=MSDN