IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

IE10 CSS Hack(顺便聊聊IE11的CSS Hack)

WEB前端开发 2013-07-07 17:59:07 累计浏览 2,757 次
本机暂存

有IE就有hack,看看IE9的css hackIE8的css hack;上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。

google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。

一、特性检测:@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on

<!--[if !IE]><!--><script>
if(/*@cc_on!@*/false){
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

请注意/*@cc_on ! @*/中间的这个感叹号。

这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:

.ie10 .example {
   /* IE10-only styles go here */
}

这是ie10标准模式下的截图:

Snip20130702_1

这是ie10,IE8模式下的截图:

Snip20130702_2

考录到兼容以后的IE版本,比如IE11,js代码可以改一下:

if(/*@cc_on!@*/false){
    document.documentElement.className+=' ie'+document.documentMode;
}

关于document.documentMode可以查看IE的documentMode属性(IE8+新增)。

可能是想多了,实事上经测试预览版的IE11已经不支持@ cc_on语句,不知道正式版会不会支持。不过这样区分IE11倒是一件好事。这样修改代码:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <!--[if !IE]><!-->
    <script>
        // 针对IE10
        if(/*@cc_on!@*/false){
            document.documentElement.className+

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,441)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,056)
  5. 浏览器的渲染原理简介 (累计阅读 8,375)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,354)
  7. 程序员眼里IE浏览器是什么样的 (累计阅读 8,010)
  8. 2010网页设计趋势 (累计阅读 7,817)
  9. Web前端工程师编程能力飞升之路 (累计阅读 7,689)
  10. 颜色的代码表达式 (累计阅读 7,665)