/* 336x280*/
掌握 CSS Hacks 可以说是前端开发工程师的一个基本技能。随着浏览器版本的遍地开花,我们寻找着尽可能使各种浏览器表现一致的 CSS 写法。当然 CSS Hacks 是最为流行的解决方案。但对于 IE 而言,目前已经有 IE6/IE7/IE8 三个主要版本,不久的将来还会有 IE9 的到来。于此,IE 是个杯具。
当然有很多人歇斯底里地诋毁 IE6,在此芒果想说的是,一切诋毁 IE6 的言论都是纸老虎。看看 IE6 的历史,它绝不是一个错误的存在。IE7/IE8 这些有严重后遗症的版本才是导致一切杯具的罪魁祸首。下面是各个 IE 版本的 CSS Hacks 写法:
IE6:
_selector{property:value;}
selector{property:value;property:value!important;} //IE6 不支持同一选择符中的 !important
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
可悲的是,IE8 会自作主张的将页面按照 IE7 模式进行渲染。目前针对 IE 多版本兼容的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式开启 IE8 的兼容模式,这样能在一定程度上减少调试 IE 的工作量。代码如下:
<meta http-equiv="X-UA-Compatible" content="IE=7"> //标准 IE7 模式 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> //兼容 IE7 模式
你也可能会碰到另一种情况:
<meta http-equiv="X-UA-Compatible" content="IE=Edge">//标准 IE 模式
IE8 在没有申明 IE=Edge 的情况下还是会存在以兼容模式渲染的情况,这种设置方案 (IE=Edge) 目前口碑网正在应用。
关于 IE=Edge 详细参考:http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2008-January/013635.html
/* 336x280*/
版权所有,转载请注明出处。
转载自 <a href="http://www.mangguo.org/css-hacks-for-ie-ie-can-be-perfect/" title="CSS Hacks for IE,IE 也可以很完美" rel="bookmark">CSS Hacks for IE,IE 也可以很完美 | 芒果小站</a>
已经有 7 条群众意见
- zhouqi
#1/2010-04-15 21:11其实 ie 确实对 css 做出了很多贡献,很多 ie 的私有属性都成了 w3c 的标准
ie6 不是不支持 !important,它只是在同一个选择器里不能用 !important 覆盖~
比如:
#demo a{color:#f00;}
a{color:#f00 !important;}
这样是可以的 回应
- 皓辰
#2/2010-04-16 22:47额,糊涂了…… 回应
- 韩国首饰批发网
#3/2010-04-18 10:21看得不是很懂。 回应
- Jutoy
#4/2010-04-22 17:39经典 HACK 回应
- CSS Hacks for IE,IE 也可以很完美 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广
#5/2011-05-02 22:36[...] 转载至:CSS Hacks for IE,IE 也可以很完美 | 芒果小站 分类: css, 其它 标签: 临时 X-UA-Compatible,IE8 兼容模式透明图片的 CSS Alpha 滤镜方法YUI 2: YAHOO Global ObjectCSS 样式切换的实现方法腾讯首页顶部整屏导航 BugCSS 3.0 参考手册(中文版)关于 HTML5 应用现状与前景的思考 评论 (0) Trackbacks (0) 发表评论 Trackback [...] 回应
- CSS 忍者:安全的 CSS hacks 秘籍 | 千里走单骑
#6/2011-06-19 17:08[...] CSS Hacks for IE,IE 也可以很完美 (5) [...] 回应
- 安全的 CSS hacks 秘籍 - 啄木鸟
#7/2011-07-22 14:03[...] 这事实上是个龌龊的做法,能解决问题又不符合规范,看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE,IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法: [...] 回应
我简单说几句