ie11怎样调试html,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代码：

hack IE7/IE8/IE9/IE11_css实例_卡卡网 webkaka.com

.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 */

}

hack IE7 IE8 IE9 IE11

分别用 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大全。

本文实例演示及源码下载

您可能对以下文章也感兴趣