博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【转】IE10 CSS hack
阅读量:7129 次
发布时间:2019-06-28

本文共 1207 字,大约阅读时间需要 4 分钟。

整理自:

中文原文: 
请尊重版权,转载请注明来源,多谢~~


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

首先,ie10不支持了。

方法一:特性检测:@cc_on

我们可以用IE私有的条件编译()结合条件注释来提供针对ie10的Hack:

 

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

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

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

 

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

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

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

作者:白树

出处:

你可能感兴趣的文章
使用sql对数据库进行操作
查看>>
java 继承内存分配
查看>>
三级菜单
查看>>
【python3的学习之路十二】面向对象高级编程
查看>>
Kali渗透测试——EtherApe
查看>>
Hibernate执行流程
查看>>
@Value注入static属性
查看>>
java使用jdbi连接几种数据库的方法
查看>>
Mac OS下 selenium 驱动safari日志
查看>>
向一个数组中添加100个不重复的随机数的几个方法
查看>>
用java解压缩zip和rar的工具类
查看>>
restful开发API
查看>>
停止表单submit提交
查看>>
docker常用镜像安装及运行
查看>>
结对-结对编项目作业名称-开发环境搭建过程
查看>>
Servlet组件合并
查看>>
给大家总结一个兼容各浏览器的获取窗口大小的方法(转)
查看>>
Mac 控制 Mac
查看>>
SpringBoot整合Ribbon注入RestTemplate实例找不到原因
查看>>
Mingw32 for ffmpeg
查看>>