技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

IE7/IE8/IE9/IE11 CSS hack 写法

作者:admin    时间:2016-10-17 7:24:9    浏览:

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的不同之处。概括如下:

  1. *# ,IE7、IE11 支持。
  2. \9 ,IE8、IE9、IE11 支持。
  3. \0 ,IE8、IE9 支持。
  4. *#\9\0 这几个写法除了IE外其他浏览器均不支持。

本文通过了一个实例介绍 IE7/IE8/IE9/IE11 CSS hack 的写法,其实,这只是其中的一个写法,对于IE家族,css hack还有其他的写法,可以看看之前曾详细介绍过的IE6\7\8\9\10\11浏览器的CSS hack大全

本文实例演示及源码下载

demo download

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

标签: hack  
x
  • 站长推荐
/* 左侧显示文章内容目录 */