CSS hack（IE6,IE7,IE8,FF）

最新推荐文章于 2021-08-04 10:22:17 发布

最新推荐文章于 2021-08-04 10:22:17 发布 · 97 阅读

文章标签：

#CSS #IE #浏览器 #Firefox #XHTML

本文介绍了一种区分不同版本Internet Explorer及Firefox浏览器的CSS Hack方法。通过使用特定语法如9 * 和_ 开发者可以精确地为目标浏览器定制样式。此技巧对于需要兼容多个浏览器版本的网页尤为重要。

CSS兼容性一直是让人很头疼的问题，我现在都不知道是应该痛恨谁了，IE？FF？标准？如果世界是统一的，我们该少死多少脑细胞啊。

以前我们只需要兼容IE6和FF，现在有了IE7，IE8，我们要兼容主流的浏览器，现在需要做到兼容IE6，IE7，IE8，FF，其他浏览器暂且认为是FF一派吧，暂称为标准浏览器，参考了一些网上的资料，总结如下：

"\9" {background-color:red\9;} 这里的\9可以区别所有的IE和FF

"*" IE6、IE7可以识别，IE8、FF不能

"_" IE6可以识别，IE7、IE8、FF不能

见下表

浏览器\hack	_	*	\9
FF	NO	NO	NO
IE8	NO	NO	YES
IE7	NO	YES	YES
IE6	YES	YES	YES

这样就可以完全区分开IE6、IE7、IE8、FF了。看下面使用的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>CSS hack</title>
<style type="text/css">
<!--
.color{
	width:200px;
	background-color: #CC00FF;    /*所有浏览器都会显示为紫色*/
	background-color: #FF0000\9; /*IE6、IE7、IE8会显示红色*/
	*background-color: #0066FF;	 /*IE6、IE7会变为蓝色*/
	_background-color: #009933;	 /*IE6会变为绿色*/
}
.text{
	width:200px;
}
-->
</style>
</head>

<body>
<div class="color">测试方块</div>
<div class="text">
	<strong style="color:#009933">IE6</strong>
	<strong style="color:#0066FF">IE7</strong>
	<strong style="color:#FF0000">IE8</strong>
	<strong style="color:#CC00FF">FireFox</strong>
</div>
</body>
</html>