条件注释的两种形式——下层隐藏与下层显示

条件注释 (conditional comment) 是于html源码中被 microsoft internet explorer 有条件解释的语句。条件注释可被用来向 internet explorer 提供及隐藏代码。
条件注释最初于微软的 internet explorer 5浏览器中出现，并且直至 internet explorer 9 均支持。微软已宣布于 internet explorer 10 中以标准模式处理页面 - 如 html5 - 时停止支持，但是旧版网页使用这种技术（于兼容性视图）将继续有效。

在处理兼容问题时，条件注释是非常常见的手段

<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- html5 shim 和 respond.js 是为了让 ie8 支持 html5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 respond.js 不起作用 -->
<!--[if lt ie 9]>
  <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->

上述示例为bootstrap官方的兼容性写法，if lt ie 9 意为if less than ie 9，也就是说当浏览器版本小于ie9时，执行下列语句，当然小于也就是说不包括ie9，如果是小于等于则是lte（less than or equal to）,大于（gt）和大于等于（gte）同理可得，普通条件注释的写法可以说很清晰了，所以这篇记录的重点也不是这里，而是针对ie以外的浏览器如何使用条件注释。

最初我是这样写的：

<!--[if !ie]>
<script type="text/javascript" src="<%=page.resolveclienturl("~/scripts/jquery-2.1.4.min.js")  %>"></script>
<![endif]-->

<!--[if lt ie 9]>
    <script type="text/javascript" src="<%=page.resolveclienturl("~/scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

想当然地认为 !ie 可以被其他浏览器识别从而达到加载不同版本jquery的目的，但实际上条件注释正常只有ie5-ie9支持，这是一个ie独有的用法，所以在兼容性的处理上就存在问题，还是看上面的例子，如果去掉2.1.4版本的条件注释，在大部分情况下都可以正常使用，但是在ie9以下的环境中就会加载两个版本的jquery，并且还有可能因为不支持高版本jquery的一些写法而报错，那么有没有更好的解决办法呢？还是有的，答案就在条件注释的不同写法中，这两种写法分别叫做下层隐藏与下层显示。

下层隐藏（downlevel-hidden）

下层隐藏就是我们上面用的那种写法，很好理解，也比较常用，但是非ie浏览器都会把它当做普通注释完全忽略里面的内容。

<!--[if ie 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->

下层显示（downlevel-revealed）

而想要写出针对其他浏览器生效的条件注释就需要下层显示的写法。首先看一个不太规范的下层显示写法

<![if !ie]>
<link href="non-ie.css" rel="stylesheet">
<![endif]>

这个示例展示了应该仅对非 ie 浏览器暴露的内容，由于该条件对 ie 为假（并且因此该内容被忽略），而这些标签自身在非 ie 浏览器中是无法识别的（并因此被忽略）。这不是有效的 html 或 xhtml。微软承认这种句法不是标准化的标记，意图是这些标记被其它浏览器忽视并暴露其中的内容。

那如果想要符合w3c标准要如何写呢？答案如下：

<!--[if !ie]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

这几种写法咋看之下都没什么区别，但是看粗看语法着色就能发现区别，下层显示状态下条件注释中的语句是有着色的，代表其已经被识别到，而下层隐藏反之，原因在于下层显示的写法其实是把条件注释的语句注释了，我们前面说到ie以外的浏览器会把条件注释内的所有内容都当做普通注释忽略，那么当我们把条件注释也注释掉的时候，ie以外的浏览器就可以识别到中间的语句了，所以一个比较合理的兼容性写法可以这样：

<!--[if !ie]>-->
<script type="text/javascript" src="<%=page.resolveclienturl("~/scripts/jquery-2.1.4.min.js")  %>"></script>
<!--<![endif]-->

<!--[if lt ie 9]>
    <script type="text/javascript" src="<%=page.resolveclienturl("~/scripts/jquery-1.12.4.min.js")%>"></script>
<![endif]-->

当使用ie5-ie9时，正常识别条件注释，跳过 !ie 的部分，读取 lt ie 9 里面的内容，当使用其他版本时忽略条件注释，读取2.1.4版本jquery