Web前端►Browser►IE

IE浏览器中的条件注释

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/11/IE%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A/

摘要

本文主要讲述了：

  1. 什么是条件注释
  2. 适用环境
  3. 示例
  4. 条件注释的语法

正文

什么是条件注释

条件注释是一种条件语句，它长得非常像 HTML 中的注释。对于不支持该特性的浏览器来说，它就是普通的注释。

特别注意：这不是 W3C 标准，也不推荐使用。

适用环境

IE5 - IE9

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if IE 9]>
      <div>IE 9</div>
    <![endif]-->
  </body>
</html>

当使用 IE9 浏览器打开index.html时，相当于打开：

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div>IE 9</div>
  </body>
</html>

当使用其他浏览器打开index.html时，相当于打开：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body></body>
</html>

语法

小于

示例：小于 IE9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if lt IE 9]>
      <div>&lt; IE 9</div>
    <![endif]-->
  </body>
</html>

小于等于

示例：小于等于 IE9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if lte IE 9]>
      <div>&lt;= IE 9</div>
    <![endif]-->
  </body>
</html>

大于

示例：大于 IE7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if gt IE 7]>
      <div>&gt; IE 7</div>
    <![endif]-->
  </body>
</html>

大于等于

示例：大于等于 IE7

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if gte IE 7]>
      <div>&gt;= IE 7</div>
    <![endif]-->
  </body>
</html>

小括号

示例：IE9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if (IE 9)]>
      <div>(IE 9)</div>
    <![endif]-->
  </body>
</html>

与

示例：既小于 IE9 又大于 IE7（即 IE8）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if (lt IE 9) & (gt IE 7)]>
      <div>(&lt; IE 9) and (&gt; IE 7)</div>
    <![endif]-->
  </body>
</html>

或

示例：IE7 或 IE9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if (IE 7) | (IE 9)]>
      <div>(IE 7) or (IE 9)</div>
    <![endif]-->
  </body>
</html>

非

示例：非 IE9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <!--[if !(IE 9)]>
      <div>not(IE 9)</div>
    <![endif]-->
  </body>
</html>

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/11/IE%E6%B5%8F%E8%A7%88%E5%99%A8%E4%B8%AD%E7%9A%84%E6%9D%A1%E4%BB%B6%E6%B3%A8%E9%87%8A/

本文对你有帮助？请支持我

支付宝
微信