ie10 11 css兼容性问题,学习一下IE10和IE11的CSS Hack
有IE就有hack,看看IE9的css hack,IE8的css hack;上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。
google上翻到的IE10 CSS Hacks 还算比较实用的。记录一下以备后用。
一、特性检测:@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。
1
2
3
4
5
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
请注意/*@cc_on ! @*/中间的这个感叹号。
这样就可以在ie10中给html元素添加一个class=”ie10″,然后针对ie10的样式可以卸载这个这个选择器下:
1
2
3
.ie10 .example {
/* IE10-only styles go here */
}
这是ie10标准模式下的截图:
这是ie10,IE8模式下的截图:
考录到兼容以后的IE版本,比如IE11,js代码可以改一下:
1
2
3
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie' + document.documentMode;
}
关于document.documentMode可以查看IE的documentMode属性(IE8+新增)。
可能是想多了,实事上经测试预览版的IE11已经不支持@ cc_on语句,不知道正式版会不会支持。不过这样区分IE11倒是一件好事。这样修改代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
无标题文档
// 针对IE10
if (/*@cc_on!@*/false) {
document.documentElement.className += ' ie' + document.documentMode;
}
// 针对IE11及非IE浏览器,
// 因为IE11下document.documentMode为11,所以html标签上会加ie11样式类;
// 而非IE浏览器的document.documentMode为undefined,所以html标签上会加ieundefined样式类。
if (/*@cc_on!@*/true) {
document.documentElement.className += ' ie' + document.documentMode;
}
.ie10 .testclass {
color: red
}
.ie11 .testclass {
color: blue
}
.ieundefined .testclass {
color: green
}
test text!
其中:
1
2
3
if (/*@cc_on!@*/true) {
document.documentElement.className += ' ie' + document.documentMode;
}
以上代码是针对IE11及非IE浏览器,因为:
IE11下document.documentMode为11,所以html标签上会加ie11样式类;
而非IE浏览器的document.documentMode为undefined,所以html标签上会加ieundefined样式类。
这样把IE11也区分出来了,IE11预览版下的截图:
。
呵呵,纯属YY,IE11正式版还不知道什么样子,而且在实际的项目中随着IE的逐渐标准化,IE11和IE10可能很少用不到css hack。
二、@media -ms-high-contrast 方法
IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来Hack IE10:
1
2
3
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
这种写法可以适配到高对比度和默认模式。所以可以覆盖到所有ie10的模式了。这种方式在预览版的IE11中也生效。
当然,方法二也可以和方法一一起用:
1
2
3
if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
document.documentElement.className += "ie10";
}
三、@media 0 方法
这个方法不是太完美,因为IE9和预览版的IE11也支持media和\0的hack。
1
2
3
@media screen and (min-width:0\0) {
/* IE9 , IE10 ,IE11 rule sets go here */
}
总之,随着IE的逐渐标准化,IE11和IE10可能很少用不到css hack,不看也罢,呵呵。
ie10 11 css兼容性问题,学习一下IE10和IE11的CSS Hack相关推荐
- 对浏览器css兼容性的学习理解及问题解决汇总
一.从浏览器内核的角度 来看,浏览器兼容性问题可分为以下三类: 1. 渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2. 脚本相关:和脚本相关的问题,包括JavaScript和DOM.BOM ...
- AngularJs在IE10,11中的一个坑。
2019独角兽企业重金招聘Python工程师标准>>> 最近项目在做IE10,11的兼容性测试,发现$http的get方法只会下发一次请求,经过查询,才得知是因为IE强制缓存了get ...
- CSS兼容性技巧整理从IE6-IE9 火狐谷歌浏览器兼容
CSS样式表对浏览器的兼容性问题有时让人很头疼,不过当我们了解了其中的原理与技巧,就会觉得轻松一些.本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧,供大家参考. CSS兼容常用技巧 请 ...
- IE10和IE9兼容性常见问题解答(FAQ)
本文档介绍了诊断和解决与IE10和IE9的文档兼容性有关的具体问题的一系列过程. 1. 我们在本文档中提到" IE10和IE9"时有什么意义? 以前版本的IE都不是符合标准的.从I ...
- IE10/11不支持条件性注释的3个解决方法
针对IE的条件性注释(Conditional comments)是专门给IE浏览器准备的,其它浏览器根本不能识别这种标记.使用条件性注释可以区别对待的针对浏览器编写CSS等代码. <!--[if ...
- 博学谷前端 css兼容性简单总结
1. CSS兼容性 在网络中浏览器众多,因为不同浏览器使用内核及对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同.以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果 ...
- 处理CSS兼容性的几个实用方式。
今天我们来聊一聊「如何处理CSS兼容性所带来的问题.」 因为浏览器厂商众多,采用的浏览器内核各不相同,所以对CSS语法支持的程度也各不相同. 有的可能是语法不支持,有的可能是语法支持但是效果表现形态不 ...
- css前端开发学习,前端百度云csdn
简历 首先肯定是要准备一份自己的简历,简历经常是给面试官的第一印象. 简历一般包括个人基础信息,专业技能,项目经验,其他模块. 个人基础信息模块就不说了,太基础. 专业技能: 专业技能这一节,最好除了 ...
- DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼容
在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 ...
最新文章
- R语言偏相关或者部分相关性系数计算实战:使用psych包计算(Partial Correlation)偏相关或者部分相关性系数并用建设检验检验相关性的显著性
- xmake 新增对 Qt 编译环境支持,用自己最喜爱的编辑器去开发 Qt 程序
- PAT甲级1059 Prime Factors :[C++题解]分解质因子
- 自定义requestAnimationFrame帧频
- c语言中判断输入是否为数字_C 判断
- 2021年上半年系统集成项目管理工程师综合知识真题及答案解析
- 一文读懂 etcd 的 mvcc 实现
- mysql net 指令_MySQL命令
- 网站如何优化才是成功的
- Java开发快递物流项目(5)
- c语言大华面试题,大华股份的一道笔试题 C/C++
- Python小数整数输出
- python图像检测_图像检索系列——利用 Python 检测图像相似度
- Fisher判别分析详解
- PRD 算法 Golang 实现
- 【C语言】数据表现形式及基本数据类型
- 会编程的都来玩玩这个游戏吧,看看你的编程水平.
- 解决:torch, torch-scatter, torch-sparse, torch-cluster, torch-spline-conv 版本不匹配而导致的问题
- 2009 中国七夕情人节 --期待
- 计算机领域nt=p,计算机考试范题-pwerpoint操作.doc