芒果小站

  1. 全球最具业界良心的主机 - DigitalOcean

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - DigitalOcean

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - DigitalOcean

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
7

CSS Hacks for IE,IE 也可以很完美

作者 芒果/分类 代码/发布于 2010-04-15 19:17

掌握 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

版权所有,转载请注明出处。
转载自 <a href="http://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 条群众意见

  1. zhouqi /2010-04-15 21:11

    其实 ie 确实对 css 做出了很多贡献,很多 ie 的私有属性都成了 w3c 的标准

    ie6 不是不支持 !important,它只是在同一个选择器里不能用 !important 覆盖~
    比如:
    #demo a{color:#f00;}
    a{color:#f00 !important;}
    这样是可以的 回应

    #1
  2. 皓辰 /2010-04-16 22:47

    额,糊涂了…… 回应

    #2
  3. 韩国首饰批发网 /2010-04-18 10:21

    看得不是很懂。 回应

    #3
  4. Jutoy /2010-04-22 17:39

    经典 HACK 回应

    #4
  5. ?
    CSS Hacks for IE,IE 也可以很完美 | zend实验室-java/php学习教程、web前端设计、网站建设、网页设计、网络SEO推广 /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 […] 回应

    #5
  6. ?
    CSS 忍者:安全的 CSS hacks 秘籍 | 千里走单骑 /2011-06-19 17:08

    […] CSS Hacks for IE,IE 也可以很完美 (5) […] 回应

    #6
  7. ?
    安全的 CSS hacks 秘籍 - 啄木鸟 /2011-07-22 14:03

    […] 这事实上是个龌龊的做法,能解决问题又不符合规范,看着也很头大。大部分人看着它只能束手无策而又逼不得已。之前的《CSS Hacks for IE,IE 也可以很完美》已经谈过 IE 的 CSS hacks 了。现在可以来简单回顾一下常用的几个方法: […] 回应

    #7

下面我简单说几句