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

所属分类: 网页制作 / CSS 阅读数: 1161
收藏 0 赞 0 分享
ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,但是针对ie10的css hack大家了解吗?
去年微软宣布,win8的Metro版IE10将不再支持插件,并且不再支持条件注释,这显然是一个冒险的举动。截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来解决。

ps:条件注释是一种安全的区分IE浏览器版本的语法,且被认为是取代针对IE css hack的首选办法。
但是,如果IE10不再支持条件注释,我们唯一的选择只能针对css的问题用css hack或者判断浏览器来解决 我们当然不希望试用后者。
有趣的是,国外已经出现了牛人的解决方法,当然不是专门使用一个css hack 解决问题的的代码片段。下面是给出这三项技术的总结,以供参考。

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

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</body>
</html>

请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:

复制代码
代码如下:

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

条件编译支持所有版本的ie浏览器,而其它浏览器不支持。但是很有可能以后IE11出来后,这种方法就失效了。。。
需要注意的是,条件编译不支持Windows store中的app中使用,只支持在IE浏览器中使用。
当然,我们也可以用传统的用ua给ie10中html元素添加class的方法来实现。
不像其他的解决方案,在这种方法中,实际上是依赖于JavaScript,所以从另一个角度来看,我们是反对的。
当然有人已经发布的改进的版本,这个检测功能,将不包括IE11,并不需要条件注释。然而它会引发““eval is evil”js警告报错信息。
下面是演示
在这里,我创建了一个替代版本不具备的eval警告:
http://jsbin.com/okuzut/2/edit
您也可以尝试,这只是打印出当前的IE版本,这个版本没有测试:
http://jsbin.com/okuzut/1/edit
但是,这似乎在IE8错误,读为“IE5”,直到您刷新页面,非常奇怪。

方法二:@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";
}

实例:

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>


方法三:@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的份额,这种情况可能不会发生吧。

结束语
事实是,你不应该使用css hack针对IE10浏览器,甚至是IE9浏览器。使用一个很好的CSS工作流程,在编写代码时,应用良好的原则。
而在大多数情况下,当不同的,你应该能功能检测,以填补空白,或者使用优美的退化允许接受的经验IE10。
如果任何人有任何其他的关于ie10 css hack的相关信息,或知道任何其他的针对IE10的条件注释方法,欢迎更新相应的方法。
更多精彩内容其他人还在看

Opera中国的WEB标准课程

网页制作Webjx文章简介:在这篇文章里,我要向大家介绍我和其他很多人花费数月时间开发的一个课程——Web标准课程,该课程旨在向大家提供Web设计和开发的坚实基础,无论读者是谁,此教程完全免费、可访问,并且不需要预备知识。当然,我主要还
收藏 0 赞 0 分享

CSS样式表渐进增强的基本概念

网页制作Webjx文章简介:如果你挠着头想弄清楚优雅降级和渐进增强的区别,我告诉你,这是视角问题。优雅降级和渐进增强都考虑网站在各种设备的各种浏览器上如何良好运转。两者区别的关键在于它们各自关注的焦点,以及这种关注对工作流程的影响
收藏 0 赞 0 分享

简单介绍Web Developer插件制作网页

网页制作Webjx文章简介:Firefox浏览器是一个良好支持W3C标准的开放源代码的浏览器,拥有Linux/Windows/Mac版本。因为Firefox浏览器良好支持W3C标准,所以使用Firefox来调试网页是非常好的。 Firefox浏览器是
收藏 0 赞 0 分享

CSS布局带来的巨大影响:CSS display属性值

网页制作Webjx文章简介:网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。 应原书编辑要求,先在文章顶部给出链接:《Everything You
收藏 0 赞 0 分享

用div css模拟表格对角线

这只是探讨一种CSS模拟表格对角线的用法,实际在工作中可能觉得这样做有点小题大作,这不是本主题讨论的重点。如果对此深以为然的朋友,请一笑过之 首先声明: 这只是探讨一种CSS模拟表格对角线的
收藏 0 赞 0 分享

IE Firefox在css中的差别 (部分)

1、单位问题 问题:任何距离的数值ie可以不加单位,ff必须要求写单位(0除外) 解决:写全单位如padding:0px; 2、水平居中 问题:div里的内容,ie默认为center,而ff默认left 解决:mairgin:0px auto; 3、高度问题
收藏 0 赞 0 分享

不用js可以实现信息提示效果

[code] <style> body { font:verdena; font-size:14px; color:#000 } h1{ font:verdena; font-size:22px; color:#000 } h2{ font:verdena;
收藏 0 赞 0 分享

CSS解决未知高度的垂直水平居中自适应问题

今天有人问起,晚上试着写出来,供参考; 以下代码兼容主流浏览器IE6、IE7、Firefox、Opera。 从最简单的开始………… 一、如何让一个DIV水平居中? 这个简单不作过多说明! [code] <st
收藏 0 赞 0 分享

CSS cursor 属性 -- 鼠标指针样式效果

取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize |
收藏 0 赞 0 分享

css 简单区别ie6,ie7,firefox的写法

同一样式里可以这样 [code] margin:17px; FF +margin:17px; IE6 IE7 _margin:17px; IE6 [/code] 按这个顺序,刚好区分开三个浏览器
收藏 0 赞 0 分享
查看更多