IE浏览器之条件性注释IF IE(Conditional comments)
在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