现在市面上的软件虽然在慢慢的抛弃IE浏览器，但是IE内核的浏览器在国内还是占有相当庞大的分量，如：政府类的项目、银行类的项目，机关类、国企内部项目等等大都使用的是IE浏览器或者说是IE内核。所以，兼容好IE，还是不容忽视的。那么，该怎么兼容各个版本的IE内核浏览器呢？我们今天就来详谈下hack技术。

本文将从三个方面来介绍关于hack的用法：条件hack、属性级hack和选择符级hack。

条件Hack

主要用于选择IE浏览器及IE的不同版本

语法：

<!--[if <keywords>? IE <version>?]>
HTML代码块
<![endif]-->

<keywords>if条件共包含6种选择方式：是否、大于、大于或等于、小于、小于或等于、非指定版本：

是否：指定是否IE或IE某个版本。关键字：空
大于：选择大于指定版本的IE版本。关键字：gt（greater than）
大于或等于：选择大于或等于指定版本的IE版本。关键字：gte（greater than or equal）
小于：选择小于指定版本的IE版本。关键字：lt（less than）
小于或等于：选择小于或等于指定版本的IE版本。关键字：lte（less than or equal）
非指定版本：选择除指定版本外的所有IE版本。关键字：!

<version>

目前常用IE版本为6.0及以上，推荐酌情忽略低版本，把精力花在为使用高级浏览器的用户提供更好的体验上。IE10及以上版本已将条件注释特性移除，使用时需注意。

说明：

用于选择IE浏览器及IE的不同版本

if条件Hack是HTML级别的（包含但不仅是CSS的Hack，可以选择任何HTML代码块）

如不想在非IE中看到某区域，可这样写：

<!--[if IE]>
<p>你在非IE中将看不到我的身影</p>
<![endif]-->

上述p代码块，将只在IE中可见。

if条件6种选择方式的使用示例（下述代码中被条件注释包含的HTML代码块也可以是link标记）：

是否，示例代码：

<!--[if IE]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，只有IE浏览，才能看到应用了test类的元素是红色文本。

大于，示例代码：

<!--[if gt IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，只有IE6以上，才能看到应用了test类的元素是红色文本。

大于或等于，示例代码：

<!--[if gte IE 6]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，只有IE6以上（含IE6），才能看到应用了test类的元素是红色文本。

小于，示例代码：

<!--[if lt IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，只有IE7以下，才能看到应用了test类的元素是红色文本。

小于或等于，示例代码：

<!--[if lte IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，只有IE7以下（含IE7），才能看到应用了test类的元素是红色文本。

非指定版本，示例代码：

<!--[if ! IE 7]>
<style>
.test{color:red;}
</style>
<![endif]-->

在上述代码中，除IE7以外的IE版本，都能看到应用了test类的元素是红色文本。

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
h1{margin:10px 0;font-size:16px;}
span{display:none;}
.not-ie{display:inline;}
</style>
<!--[if IE]>
<style>
.ie{display:inline;}
.not-ie{display:none;}
</style>
<![endif]-->

<!--[if IE 5]>
<style>
.ie5{display:inline;}
</style>
<![endif]-->

<!--[if IE 6]>
<style>
.ie6{display:inline;}
</style>
<![endif]-->

<!--[if IE 7]>
<style>
.ie7{display:inline;}
</style>
<![endif]-->

<!--[if IE 8]>
<style>
.ie8{display:inline;}
</style>
<![endif]-->

<!--[if IE 9]>
<style>
.ie9{display:inline;}
</style>
<![endif]-->
</head>
<body>
<div>
	您正在使用
	<span class="not-ie">非IE</span>
	<span class="ie">IE</span>
	<span class="ie5">5</span>
	<span class="ie6">6</span>
	<span class="ie7">7</span>
	<span class="ie8">8</span>
	<span class="ie9">9</span>
	浏览器
</div>
</body>
</html>

属性级Hack

主要选择不同的浏览器及版本

属性级Hack

语法：

selector{<hack>?property:value<hack>?;}

取值：

_：选择IE6及以下。连接线（中划线）（-）亦可使用，为了避免与某些带中划线的属性混淆，所以使用下划线（_）更为合适。

*：选择IE7及以下。诸如：（+）与（#）之类的均可使用，不过业界对（*）的认知度更高

\9：选择IE6+

\0：选择IE8+和Opera15以下的浏览器

说明：

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。如下面这个例子：

如想同一段文字在IE6,7,8显示为不同颜色，可这样写：

.test {
	color: #090\9; /* For IE8+ */
	*color: #f00;  /* For IE7 and earlier */
	_color: #ff0;  /* For IE6 and earlier */
}

注意：上述Hack均需运行在标准模式下，若在怪异模式下运行，这些Hack将会被不同版本的IE相互识别，导致失效。

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>属性级Hack_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
h1 {
	margin: 10px 0;
	font-size: 16px;
}
.test {
	color: #c30;          /* For latest Firefox, chrome, Safari */
	color: #090\0;        /* For Opera15- */
	color: #00f\9;        /* For IE8+ */
	*color: #f00;         /* For IE7 */
	_color: #ff0;         /* For IE6 */
}
</style>
</head>
<body>
<div class="test">在不同浏览器下看看我的颜色吧</div>
</body>
</html>

选择符级Hack

选择不同的浏览器及版本

选择符级Hack

语法：

<hack> selector{ sRules }

说明：

选择不同的浏览器及版本

尽可能减少对CSS Hack的使用。Hack有风险，使用需谨慎

通常如未作特别说明，本文档所有的代码和示例的默认运行环境都为标准模式。

一些CSS Hack由于浏览器存在交叉认识，所以需要通过层层覆盖的方式来实现对不同浏览器进行Hack的。

简单列举几个：

* html .test { color: #090; }       /* For IE6 and earlier */
* + html .test { color: #ff0; }     /* For IE7 */
.test:lang(zh-cmn-Hans) { color: #f00; }  /* For IE8+ and not IE */
.test:nth-child(1) { color: #0ff; } /* For IE9+ and not IE */

注意：上述代码中的3,4两行就是典型的利用能力来进行选择的CSS Hack。

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<style>
* html .test {
	color: #090;
}
* + html .test {
	color: #ff0;
}
.test:lang(zh-cmn-Hans) {
	color: #f00;
}
.test:nth-child(1) {
	color: #0ff;
}
</style>
</head>
<body>
<div class="test">在不同浏览器下看看我的颜色吧</div>
</body>
</html>

原创文章，作者：Ferrycoln，如若转载，请注明出处：https://ms200.cn/archives/913

web前端hack解决IE兼容性问题技术的多方位分析和详解

条件Hack

语法：

说明：

属性级Hack

语法：

取值：

说明：

实例

选择符级Hack

语法：

实例

发表评论取消回复

评论列表（1条）

联系我们

web前端hack解决IE兼容性问题技术的多方位分析和详解

条件Hack

语法：

说明：

属性级Hack

语法：

取值：

说明：

实例

选择符级Hack

语法：

实例

相关推荐

发表评论 取消回复

评论列表（1条）

请登录

联系我们

发表评论取消回复