HTML的条件注释及hack技术

在很多时候，前端的兼容性问题，都很让人头痛！幸运的是，微软从去年声明：从2016年1月12日起，微软将停止为IE8（包括IE8）提供技术支持和安全更新。整个前端圈子都沸腾起来，和今年七月份Adobe宣布计划终结 Flash一样，都是IT届的头等大喜事。

但针对一些还在用IE的人来说，或者一些故意刁难问IE兼容的HR来说，确实是个难题，这里列举一些兼容的方法

条件注释

HTML的hack代码模板：

<!--[if IE ６]>
<ｐ>只兼容IE6<／p>
<![endif]-->
注：
①用于写兼容的注释，标签内首位都要加！感叹号。

②单词都写在一对中括号中

③IE和版本号之间要加空格

④不加比较单词，表示只兼容这一个版本；

比较单词：lt=less than(小于)、lte=less than or equal (小于等于)、gt=great than(大于)、gte=great than or equal(大于等于)

<!--[if IE ６]>
<ｐ>只有IE6认识我<／p>
<![endif]-->

<!--[if gte IE 9]>
<h1>大于等于IE9的浏览器能看到</h1>
<![endif]-->

<!--[if lte IE 8]>
<h1 class="red">您的浏览器版本过低，IE8及以下版本不支持新样式，请更新浏览器</h1>
<![endif]-->

只要记住这一个模板就知道HTML的兼容怎么写了，下面我们列举几个：，如下：

1、支持所有IE浏览器

<!--[if IE]>

<link rel="stylesheet" href="all-ie-only.css" type="text/css"/>

<![endif]-->

2、支持非IE浏览器

<!--[if !IE]>

<link rel="stylesheet" href="not-ie.css" type="text/css"/>

<![endif]-->

或

<!--[if !IE]><!-->

<link rel="stylesheet" type="text/css" href="not-ie.css" />

<!--<![endif]-->

3、仅仅支持IE10

<!--[if IE 10]>

<link rel="stylesheet" type="text/css" href="ie10.css">

<![endif]-->

4、仅仅支持IE9

<!--[if IE 9]>

<link rel="stylesheet" type="text/css" href="ie9.css">

<![endif]-->

............只想支持单一的某个IE版本，就和上述方法一样

5、支持IE10以下版本（IE9以及IE9以下版本）

这种方法是样式表使用在低于IE10的浏览器,换句话说除了IE10以外的所有IE版本都将被支持。

<!--[if lt IE 10]>

<link rel="stylesheet" type="text/css" href="ie9-and-down.css">

<![endif]-->

也可以写成

<!--[if lte IE 9]>

<link rel="stylesheet" type="text/css" href="ie9-and-down.css">

<![endif]-->

前面我们也说过了lt和lte的区别,lt表示小于版本号，不包括条件版本号本身；而lte是小于或等于版本号，包括了版本号自身。

6、支持IE9以下版本（IE8以及IE8以下版本）

<!--[if lt IE 9]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css">

<![endif]-->

或：

<!--[if lte IE 8]>

<link rel="stylesheet" type="text/css" href="ie8-and-down.css">

<![endif]-->

............只想支持某个IE版本以下的方法，就和上述方法一样

上面8——11这几种方法，使用的是低于（lt）和低于或等于（lte）的方法来判断，我们也可以使用大于（gt）和大于或等于（gte）达到上面的效果：

7、高于IE9的版本(IE10以及IE10以上版本)

<!--[if gt IE 9]>

<link rel="stylesheet" type="text/css" href="ie10-and-up.css">

<![endif]-->

或：

<!--[if gte IE 10]>

<link rel="stylesheet" type="text/css" href="ie10-and-up.css">

<![endif]-->

............只想支持某个IE版本以上，就和上述方法一样

9、高于IE5.5的版本(IE6以及IE6以上版本)

<!--[if gt IE 5.5]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css">

<![endif]-->

或：

<!--[if gte IE 6]>

<link rel="stylesheet" type="text/css" href="ie6-and-up.css">

<![endif]-->

注：以上 内容来自浏览器兼容之旅的第一站:如何创建条件样式

以上内容转载并选择摘录内容

对上文的一点补充：

10、指定多种IE版本

<!--[if (IE 6)|(IE 7)|(IE 8)]>

<link rel="stylesheet" type="text/css" href="ie6-7-8.css">

<![endif]-->

第二种，使用hack技术，妥妥的，比较，每次判断都重新写内容，特别的麻烦，这时，针对css兼容的hack技术出行了（以下内容为原创）

例子1：

_/*给IE6用的*/
* /*给IE6/7用的*/
 /*给IE8-11 用的*/
 /*给IE 6-10用的*/
width:400px\9;/*以上的hack技术几乎适用于所有属性*/

例子2：

块级元素的inline-block 在IE6/7下无效
解决：1.不用
2.添加 *display:inline * zoom:1;
并在一行的时候尽量不要使用

例子3：

IE6下会出现出现双倍边距问题
同方向浮动margin会产生双边距
解决:给浮动元素添加属性 display:inline

例子4：

图片存在下边距问题
在任何图片下都会有3px的间距
解决方法:1.给图片添加display:block;
2.给图片添加vertical-align:top (| middle | bottom)

例子5：

高版本的input表单中的默认图标
/*
css-hack技术解决高版本IE默认图标问题
*/
::-ms-clear{ display:none; }/*text input表单*/
::-ms-reveal{ display:none; }/*password input表单*/

例子6：

/*
定位属性的单像素问题
在IE6中如果绝对定位的参考元素(有定位属性的父级)
是单数的情况下
解决:1.不要使用单数
2.使用css-hack技术：_属性：值 给IE6使用
*/

例子7：

/*
li中有元素具有浮动属性时 会产生下边距
解决:给li元素元素标签添加属性vertical-align:top
*/

例子8：

<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器，无论是否用DTD声明文档标准，IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器，IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">
<meta http-equiv="X-UA-Compatible" content="IE=7,9">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
#以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame.

最后，还有就是css3新属性中一些不稳定的属性值，应该在前面添加前缀

-webkit-   属于chrome浏览器和safari浏览器的私有属性，也是浏览器内核

-moz-   属于firefox的私有属性

-ms-    属于IE浏览器的私有属性

-o-     属于opera的私有属性

当然，除了以上的css的兼容方法，一定还有很多我不为所知的更好的兼容方法。希望知道的大神都能留下你们的足迹和你们所知道的方法，谢谢！！