Ruby's Louvre

每天学习一点点算法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

IE10 CSS hack

整理自: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的样式可以卸载这个这个选择器下:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
   /* IE10-specific styles go here */ 
}

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

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

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

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

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

if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}

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

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

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

@media screen and (min-width:0\0) { 
    /* IE9 and IE10 rule sets go here */ 
}

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

总结:

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

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(5023)  评论(1编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
历史上的今天:
2009-12-07 (转)Google Closure: 糟糕的JavaScript
2009-12-07 tabIndex属性
点击右上角即可分享
微信分享提示