`
justcss
  • 浏览: 121773 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

这个是ie10新引入的私有语句,叫做条件编译(conditional compilation),用于javascript。使用了之后注释中的js也会被解析:

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

好吧,其实不知道IE11会不会继续支持这个私有语句,如果是的话,就比较难区分IE10和IE11了。

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

当然,我们也可以用传统的用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多写一句代码。。。

66
10
分享到:
评论

相关推荐

    ie10 css hack 条件注释等兼容方式整理

    在这些解决方案中,条件注释、有条件的类以及特定于IE的CSS hack是三种主要手段。然而,微软宣布IE10将不再支持插件及条件注释,这无疑对开发者提出了新的挑战。 首先,条件注释是IE浏览器的一个特性,通过特殊的...

    CSSHack解决兼容

    什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack

    css_hack csshack技术

    ### CSS Hack 技术详解及应用 #### 一、引言 随着互联网技术的发展,Web前端开发变得越来越重要。然而,在实际开发过程中,一个不容忽视的问题便是**跨浏览器兼容性**。由于不同浏览器(包括同一浏览器的不同版本...

    CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar

    这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...

    CSS hack技巧大全

    【CSS Hack技巧大全】 在网页开发中,CSS(层叠样式表)的兼容性问题一直是一个挑战,尤其是在处理不同浏览器间的表现差异时。CSS Hack是一种技术,用来解决这些差异,确保样式在各种浏览器中都能正确呈现。本文将...

    针对firefox ie6 ie7 ie8的css样式hack

    本文将详细介绍如何为Firefox以及IE6、IE7、IE8等浏览器编写CSS Hack。 ### CSS Hack定义 CSS Hack是一种专门用于解决浏览器间CSS渲染差异的技术,通过向某些浏览器提供特定的样式规则来达到兼容的目的。CSS Hack...

    CSS布局资料:IE5、IE6、IE7、IE8 的CSS HACK兼容列表.mht

    CSS布局资料:IE5、IE6、IE7、IE8 的CSS HACK兼容列表

    IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    "IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...

    css hack浏览器兼容性

    css hack ie6 ie7 ie8 firefox等浏览器兼容性

    H5 CSS hack 和浏览器内核

    而在IE10中,我们利用@media查询进行Hack,确保动画效果的兼容性。 总的来说,H5 CSS Hack是解决浏览器兼容性问题的重要手段,通过理解和灵活运用各种Hack方法,可以确保网页在不同浏览器上呈现出一致的视觉效果。...

    IE6、IE7、IE8、Firefox兼容性CSS HACK代码+示例

    尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...

    CSS Hack 浏览器兼容文档

    本篇文章主要探讨了针对IE6、IE7、IE8、IE9以及Firefox(FF)的CSS Hack方法。 1. **CSS Hack原理**: 不同的浏览器对某些CSS特性或者字符的识别有所不同。例如,星号(*)在IE6和IE7中被识别为一个选择器前缀,但...

    ie6,ie7,ie8和FF下CSS解决兼容性大全(CSS HACK)

    搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。

    IE9的css hack使用示例

    标题中的“IE9的css hack使用示例”揭示了随着IE9浏览器的推出,CSS hack也需要相应的更新以适应新版本的特性。IE9作为微软发布的Windows Internet Explorer浏览器的第九个版本,它在CSS支持方面较之IE8有了一些提升...

    CSS hack汇总

    ### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...

    CSS hack 兼容标识.rar_CSS hack 兼容标识

    为了解决这些问题,开发者们发展出了一种技术,即“CSS Hack”,以确保样式在各种浏览器中表现一致。本篇文章将深入探讨CSS Hack以及其在解决浏览器兼容性问题中的应用。 首先,CSS Hack的核心在于利用浏览器解析...

Global site tag (gtag.js) - Google Analytics