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

IE10 CSS hack

前端观察 2012-12-05 13:08:04 累计浏览 4,854 次
本机暂存

整理自:http://www.impressivewebs.com/ie10-css-hacks/

中文原文: IE10 CSS hack

请尊重版权,转载请注明来源,多谢~~

传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的,有些不确定是否是ie10引出的bug,所以惯性思维让我们重新寻找针对IE10的CSS Hack。。。

首先,ie10不支持条件注释了。

方法一:特性检测:@cc_on

我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:

<!--[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 */  

}

条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。

需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。

当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。

方法二:@media -ms-high-contrast

IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  

  /* IE10-specific styles go here */  

}

这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。

然后这种方式可能也会在后面的IE11中生效。

当然,方法二也可以和方法一一起用:

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {

   document.documentElement.className += "ie10";

}

方法三:@media 0

这个有些变态了,而且不太完美,因为IE9也支持media,也支持\0的hack:

@media screen and (min-width:0\0) {  

   /* IE9 and IE10 rule sets go here */  

}

不过,估计后面ie10也会普及到Windows 7平台,所以ie9会消失,只是看看ie8和ie7的份额,这种情况可能不会发生吧。。。

总结:

我不想给ie写hack,嗯,不想为ie多写一句代码。。。


同分类推荐文章

  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,442)
  2. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  3. 各公司对前端开发的职位描述 (累计阅读 10,405)
  4. iframe大小自适应 (累计阅读 10,057)
  5. 浏览器的渲染原理简介 (累计阅读 8,377)
  6. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  7. iframe里src="about:blank"的问题。 (累计阅读 8,089)
  8. 程序员眼里IE浏览器是什么样的 (累计阅读 8,011)
  9. 2010网页设计趋势 (累计阅读 7,818)
  10. Web前端工程师编程能力飞升之路 (累计阅读 7,691)