我的博客前端包含大量的 HTML5 标签,对于 IE 9 以下的浏览器 是无法正常显示的。我准备给博客增加一个功能,如果是 IE 9 以下的浏览器访问就提示升级浏览器。

检测浏览器的方法有很多,可以通过 JavaScript 检测,也可以通过 PHP 判断 UserAgent 检测,也可以通过 HTML 来检测。不过 HTML 只能检测 IE 浏览器,因为我只需要检测 IE,所以就直接用 HTML 来检测了。

下面就简单写一下通过条件注释来检测 IE 的方法:

简单演示

下面检测 IE 8 和 IE 8 以下的浏览器:

<!--[if lte IE 8]>
<div>
检测到您的浏览器版本过低,可能无法正常显示本网站。为了您的浏览体验,建议您升级浏览器。
<div>
<![endif]-->

上面 div 中的内容会在 IE 9 以下的浏览器显示。

注释的语法就有点类似于 PHP 的 <?php if (): ?><?php endif; ?> 。如果条件满足,就会执行中间的内容。

运算符说明

下面是运算符说明:

lt

lt 是小于运算符,用法如下:

<!--[if lt IE 8]>
<div>
IE 版本低于 8
<div>
<![endif]-->

上面的内容会在 IE 8 以下的浏览器显示。

lte

lte 是小于或等于运算符,用法如下:

<!--[if lte IE 8]>
<div>
IE 版本低于 9
<div>
<![endif]-->

上面 div 中的内容会在 IE 8 和 IE 8 以下的浏览器显示。

gt

gt 是大于运算符,用法如下:

<!--[if gt IE 7]>
<div>
IE 版本高于 7
<div>
<![endif]-->

上面 div 中的内容会在 IE 7 以上的浏览器显示。

gte

gte 是大于或等于运算符,用法如下:

<!--[if gte IE 8]>
<div>
IE 版本高于 7
<div>
<![endif]-->

上面 div 中的内容会在 IE 8 和 IE 8 以上的浏览器显示。

&

& 是 and 运算符,用于多条件判断,用法如下:

<!--[if (gt IE 7) & (lt IE 9)]>
<div>
IE 版本为 8
<div>
<![endif]-->

多条件判断时条件需要写在 () 中,上面 div 中的内容会在 IE 8 上显示。

|

|or 运算符,用于多条件判断,只要满足其中一个条件就可以执行。用法如下:

<!--[if (gt IE 8) | (lt IE 8)]>
<div>
不是 IE 8
<div>
<![endif]-->

上面 div 中的内容会在 IE 8 以外的 IE 浏览器显示。

以上就是可能会用到的运算符。

其它用法

条件注释除了能用来显示特定内容外也可以用来加载资源或执行脚本。

下面使用条件注释来执行 JS :

<!--[if gt IE 7]>
<script>
    alert('IE 版本高于 7');
</script>
<![endif]-->

上面会在 IE 7 以上的浏览器弹出 alert 对话框。

加载资源也是一样的写法。

兼容性

HTML 条件注释只有在 IE 9 以下的 IE浏览器 才有作用,IE 10 和 IE 11 都是无效的,会当成注释处理。IE 以外的其它浏览器也会当成注释处理。