IE7/IE8/IE9/IE11 CSS hack 写法
IE7、IE8、IE9、IE11虽然同属IE家族，但他们在网页渲染时，对css属性的识别却不尽相同，因此，我们会发现网页在IE9浏览好好的，却在IE11上浏览时出现错乱的问题。作为一名合格的网页设计者，应该考虑到各浏览器兼容的问题，因此，浏览器兼容性调试的工作是不能不做的。本文将举例介绍IE家族IE7、IE8、IE9、IE11的css hack的问题，了解它们之间的差异，从而能够写出兼容性良好的css样式代码。
如何hack IE7/IE8/IE9/IE11 CSS
我们先看下面这段HTML代码：
<!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" xml:lang="zh-CN" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="Cache-Control" content="no-transform " />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes" />
<title>hack IE7/IE8/IE9/IE11_css实例_卡卡网 webkaka.com</title>
<style type="text/css">
.content_ie7{
*background-color:#000000; /* black ie7 ie11 */
/* 或 */
#background-color:#000000; /* black ie7 ie11 */
}
.content{
width:200px;height:50px;color:#ccc;
background-color:#FF0000; /* red default */
background-color:#FFFF00\9; /* yellow ie8 ie9 ie11 */
background-color:#0000FF\0; /* blue ie8 ie9 */
}
</style>
</head>
<body>
<div class="content_ie7 content">hack IE7 IE8 IE9 IE11</div>
</body>
</html>
分别用 IE7 IE8 IE9 IE11 浏览器打开网页，会发现显示的背景颜色（background-color）各不相同。分别如下：
IE7 #000000 （黑色black ▇）
IE8 #0000FF （蓝色blue ▇）
IE9 #0000FF （蓝色blue ▇）
IE11 #FFFF00 （黄色yellow ▇）
其他浏览器如Chrome、Firefox、360会显示 #FF0000 （红色red ▇）
上述实例css代码是我经过反复调试而得出的兼容性写法。经过此实例，可以看出 IE7、IE8、IE9、IE11 解析CSS的不同之处。概括如下：
- * 或 # ，IE7、IE11 支持。
- \9 ，IE8、IE9、IE11 支持。
- \0 ，IE8、IE9 支持。
- *、#、\9、\0 这几个写法除了IE外其他浏览器均不支持。
本文通过了一个实例介绍 IE7/IE8/IE9/IE11 CSS hack 的写法，其实，这只是其中的一个写法，对于IE家族，css hack还有其他的写法，可以看看之前曾详细介绍过的IE6\7\8\9\10\11浏览器的CSS hack大全。
本文实例演示及源码下载
demo download
您可能对以下文章也感兴趣
- 不注意这点，\9和\0就可能对hack IE11\IE9\IE8无效
- IE11 hack css的符号原来是“#”号
- css区分ie8/ie9/ie10/ie11 chrome firefox的代码
- css巧用两符号#和下横线解决div高宽的浏览器兼容性问题
