整理自: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多写一句代码。。。
分享到:
相关推荐
在这些解决方案中,条件注释、有条件的类以及特定于IE的CSS hack是三种主要手段。然而,微软宣布IE10将不再支持插件及条件注释,这无疑对开发者提出了新的挑战。 首先,条件注释是IE浏览器的一个特性,通过特殊的...
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
### CSS Hack 技术详解及应用 #### 一、引言 随着互联网技术的发展,Web前端开发变得越来越重要。然而,在实际开发过程中,一个不容忽视的问题便是**跨浏览器兼容性**。由于不同浏览器(包括同一浏览器的不同版本...
这份名为“CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8.rar”的压缩包,提供了针对这些浏览器的CSS Hack解决方案,以确保在不同环境下页面的正常显示。 CSS Hack通常指的是利用浏览器解析CSS的bug或者特性,...
【CSS Hack技巧大全】 在网页开发中,CSS(层叠样式表)的兼容性问题一直是一个挑战,尤其是在处理不同浏览器间的表现差异时。CSS Hack是一种技术,用来解决这些差异,确保样式在各种浏览器中都能正确呈现。本文将...
本文将详细介绍如何为Firefox以及IE6、IE7、IE8等浏览器编写CSS Hack。 ### CSS Hack定义 CSS Hack是一种专门用于解决浏览器间CSS渲染差异的技术,通过向某些浏览器提供特定的样式规则来达到兼容的目的。CSS Hack...
CSS布局资料:IE5、IE6、IE7、IE8 的CSS HACK兼容列表
"IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表" 提供了一个宝贵的资源,帮助开发者解决在不同浏览器之间存在的CSS样式差异。下面我们将深入探讨这个话题,了解各种CSS hack及其在这些浏览器中的表现。 ...
css hack ie6 ie7 ie8 firefox等浏览器兼容性
而在IE10中,我们利用@media查询进行Hack,确保动画效果的兼容性。 总的来说,H5 CSS Hack是解决浏览器兼容性问题的重要手段,通过理解和灵活运用各种Hack方法,可以确保网页在不同浏览器上呈现出一致的视觉效果。...
尤其是在处理旧版Internet Explorer(如IE6、IE7、IE8)与现代浏览器(如Firefox、Chrome等)之间的样式差异时,CSS Hack技巧成为了必不可少的工具。本文将深入探讨不同浏览器兼容性的CSS Hack代码及其实例,帮助...
本篇文章主要探讨了针对IE6、IE7、IE8、IE9以及Firefox(FF)的CSS Hack方法。 1. **CSS Hack原理**: 不同的浏览器对某些CSS特性或者字符的识别有所不同。例如,星号(*)在IE6和IE7中被识别为一个选择器前缀,但...
搜集整理的CSS HACK,也即是在多种浏览器(主要是ie6 ie7 ie8 ff)下样式统一的解决办法。 内容还是较全的,前台开发中常见的兼容性问题都可以找到解决方法,值得研究。 包括各浏览器CSS hack,技巧。有实例。
标题中的“IE9的css hack使用示例”揭示了随着IE9浏览器的推出,CSS hack也需要相应的更新以适应新版本的特性。IE9作为微软发布的Windows Internet Explorer浏览器的第九个版本,它在CSS支持方面较之IE8有了一些提升...
### CSS Hack 汇总:解决 IE6,IE7,IE8 及 Firefox 的兼容性问题 在网页设计与开发领域,确保不同浏览器间的代码兼容性是一项挑战性的任务,尤其是在处理像 Internet Explorer 6(IE6)、IE7、IE8 和 Firefox 这些...
为了解决这些问题,开发者们发展出了一种技术,即“CSS Hack”,以确保样式在各种浏览器中表现一致。本篇文章将深入探讨CSS Hack以及其在解决浏览器兼容性问题中的应用。 首先,CSS Hack的核心在于利用浏览器解析...