一、特性检测:@cc_on

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

 
1
2
3
4
5
<!--[if !IE]><!--><script>
if(/*@cc_on!@*/false){
    document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->

请注意/*@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
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <!--[if !IE]><!-->
    <script>
        // 针对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;
        }
    </script>
    <!--<![endif]-->
    <style type="text/css">
        .ie10 .testclass {
            color:red
        }
        .ie11 .testclass {
            color:blue
        }
        .ieundefined  .testclass {
            color:green
        }
    </style>
</head>
 
<body>
<div class="testclass">
    test text!
</div>
</body>
</html>

其中:

 
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 CSS Hack(顺便聊聊IE11的CSS Hack)的更多相关文章

  1. 什么是Css Hack?ie6,7,8的hack分别是什么?

    针对不同的浏览器写不同的CSS code的过程,就是CSS hack. 示例如下: 1 2 3 4 5 6 7 8 9 10 11 12 #test       { width:300px; heig ...

  2. 浅析history hack、心血漏洞、CSS欺骗、SQL注入与CSRF攻击

    漏洞产生的原因主要有系统机制和编码规范两方面,由于网络协议的开放性,目前以 Web 漏洞居多 关于系统机制漏洞的典型有JavaScript/CSS history hack,而编码规范方面的漏洞典型有 ...

  3. 高效CSS書寫規範及CSS兼容性

    一.選擇器針對性說明 某一元素的多个规则集中,选择器的针对性越高,该规则集的权重也就越高.针对性相同的,后出现的规则集的权重更高. * {} /* a=0 b=0 c=0 d=0 -> spec ...

  4. WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF

    WeasyPrint - Converts HTML + CSS to PDF - WeasyPrint converts HTML/CSS documents to PDF WeasyPrint c ...

  5. 10 个 GitHub 上超火的 CSS 奇技淫巧项目,找到写 CSS 的灵感!

    大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧

  6. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. CSS性能分析,如何优化CSS提高性能

    不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...

  8. Normalize.css – 现代 Web 开发必备的 CSS resets

    Normalize.css 是一个可定制的 CSS 文件,使浏览器呈现的所有元素,更一致和符合现代标准.它正是针对只需要统一的元素样式.该项目依赖于研究浏览器默认元素风格之间的差异,精确定位需要重置的 ...

  9. 你真的精通 CSS 了?来挑战一下 CSS 选择器测验吧

    CSS 选择器赋予 CSS 强大的 HTML 元素匹配功能.作为前端开发人员必须要掌握的一部分,可能基本的大家都知道.但是你真的精通 CSS 了吗?挑战一下 CSS 选择器测验就知道. 您可能感兴趣的 ...

随机推荐

  1. .net core i上 K8S(一)集群搭建

    1.前言 以前搭建集群都是使用nginx反向代理,但现在我们有了更好的选择——K8S.我不打算一上来就讲K8S的知识点,因为知识点还是比较多,我打算先从搭建K8S集群讲起,我也是在搭建集群的过程中熟悉 ...

  2. occal [问题解决]ORA-01427: 单行子查询返回多个行

    有人问题我一个问题,情况如下:他要用根据divide_act_channel_day的new_amount字段去更新divide_stat的new_amount字段.两张表关联的条件:day=log_ ...

  3. 使用原生javascript和jQuery解析json数据

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式. JSONM文件中包含了关于“名称”和“值”的信息. 有时候我们需要读取JSON格式的数据文件,在jQuer ...

  4. vector妙用轻松水过平衡树???

    极短代码预警 今天听身边的神仙说,可以用vector来写平衡树,代码极短. 然后去网上搜了一下,看到了attack dalao的这篇文章. 蒟蒻表示ssfd 赶紧膜拜了一波,并发表了一篇博客表示纪念. ...

  5. dataframe去重 drop_duplicates

    data.drop_duplicates() #默认:data中一行元素全部相同时才去除 data.drop_duplicates(['a','b'])#data根据’a','b'组合列删除重复项,默 ...

  6. 获取请求 header 中指定字段的值

    private function getHeader($name) {//获取请求头中$name的值 $name = 'HTTP_' . $name; foreach ($_SERVER as $ke ...

  7. Access MongoDB Data with Entity Framework 6

    This article shows how to access MongoDB data using an Entity Framework code-first approach. Entity ...

  8. java 数字转 字符串 互相转换

    各种数字类型转换成字符串型:   String s = String.valueOf( value); // 其中 value 为任意一种数字类型.   字符串型转换成各种数字类型:   String ...

  9. java架构师之路,享学课堂VIP课程视频下载

    享学课堂并发编程:百度网盘 链接:https://pan.baidu.com/s/10O8oXC0yNRArUh3WKkXayg 提取码:o01s 更多视频获取方式请留言

  10. NameError: name 'unicode' is not defined

    更改Unicode为str 然后重新setup install