前端开发

 首页 > 前端开发 > css教程 > IE10 、IE11 CSS Hack - html/css语言栏目:html.css - 自学 总结:

IE10 、IE11 CSS Hack - html/css语言栏目:html.css - 自学 总结:

分享到:
【字体:
导读:
          传说Windows 8刚上市没几天就卖出了4000多万份,好厉害。然后我们就发现项目中很多页面在IE10中表现不正常了。有的是之前对各版本ie的hack引发的,有些不确定是否是ie10引出的bug,所以...

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

首先,ie10不支持条件注释了。前端UI分享

一、特性检测:@cc_on

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

google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。

1 2 3 4 5

请注意/*@cc_on ! @*/中间的这个感叹号。

这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:

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

这是ie10标准模式下的截图:前端UI分享

Snip20130702_1

这是ie10,IE8模式下的截图:

Snip20130702_2

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

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

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

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

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

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

这种写法可以适配到高对比度和默认模式,所以可以覆盖到所有ie10的模式了,然后这种方式可能也会在后面的IE11中生效。

当然,方法二也可以和方法一一起用:前端UI分享

1 2 3 @media screen and (min-width:00) { /* IE9 and IE10 rule sets go here */ }

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

三、@media 0 方法

这个方法不是太完美,因为IE9和预览版的IE11也支持media和的hack。

1 2 3 @media screen and (min-width:00) { /* IE9 , IE10 ,IE11 rule sets go here */ }

总结:

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

分享到:
ajax、Html、asp调用数据库 - html/css语...
一.前端页面: test function buttonClick() { var name = document.getElementById("name").value; var age = document.getElementById("age").value; var sex = document.getElementById("sex").value; alert("姓名" + name + "...
关于CSS细节集合(一) - html/css语言栏目...
一、当文字与图片在一行,需要将文字与图片底对齐,需要这样写: 1 li>记住密码img src="" align="bottom" style="margin-bottom:-4px"/>li> 二、当文字与图片在一行,需要将文字与图片居中对齐,需要这样写: 1 li>记住密码img src="static/img/xyx.jpg" align="middle"/>li> 三、更改IE“查...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……