<!doctype html>

<html>

 <head>

  <title>IE10/11 Media Query Test</title>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <style>

    @media all and (-ms-high-contrast:none)

     {

     .foo { color: green } /* IE10 */

     *::-ms-backdrop, .foo { color: red } /* IE11 */

     }

  </style>

 </head>

 <body>

  <div class="foo">Hi There!!!</div>

 </body>

</html>

IE 6

* html .ie6 {property:value;}
down vote

In the light of the evolving thread, I have updated the below:

IE 6

* html .ie6 {property:value;}

or

.ie6 { _property:value;}

IE 7

*+html .ie7 {property:value;}

or

*:first-child+html .ie7 {property:value;}

IE 6 and 7

@media screen\9 {

    .ie67 {property:value;}

}

or

.ie67 { *property:value;}

or

.ie67 { #property:value;}

IE 6, 7 and 8

@media \0screen\,screen\9 {

    .ie678 {property:value;}

}

IE 8

html>/**/body .ie8 {property:value;}

or

@media \0screen {

    .ie8 {property:value;}

}

IE 8 Standards Mode Only

.ie8 { property /*\**/: value\9 }

IE 8,9 and 10

@media screen\0 {

    .ie8910 {property:value;}

}

IE 9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {

 // IE9 CSS

 .ie9{property:value;}

}

IE 9 and above

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {

  // IE9+ CSS

  .ie9up{property:value;}

}

IE 9 and 10

@media screen and (min-width:0\0) {

    .ie910{property:value\9;} /* backslash-9 removes ie11+ & old Safari 4 */

}

IE 10 only

_:-ms-lang(x), .ie10 { property:value\9; }

IE 10 and above

_:-ms-lang(x), .ie10up { property:value; }

or

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

   .ie10up{property:value;}

}

IE 11 (and above..)

_:-ms-fullscreen, :root .ie11up { property:value; }

原文地址 http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11

 

ie11媒体查询以及其他hack的更多相关文章

  1. 【译】PX、EM还是REM媒体查询？

    原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...

  2. bootstrap在ie8下，兼容媒体查询

    最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...

  3. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  4. 媒体查询（pc端，移动端不同布局）

    媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样 ...

  5. 关于媒体查询 @Media Screen 与响应式

    其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...

  6. 深入理解CSS Media媒体查询

    × 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...

  7. CSS3媒体查询使用小结

    首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...

  8. CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

    /* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...

  9. iPhone的CSS3媒体查询

    iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...

随机推荐

  1. js console 一些拓展技巧

    console.time 方法 / console.timeEnd() 方法 统计一段代码的执行时间, 形参必须一致 console.time("string"); for(var ...

  2. iTunes.exe 在win7系统中运行出错解决办法

    重新安装了iTunes打开后就报错,然后直接退出 查windows日志提示错误应用程序名称: iTunes.exe 错误模块名称: KERNELBASE.dll 重新安装iTunes问题依旧,后来在G ...

  3. 在VS2013中查看C/C++预处理后的文件

    1.右键工程(例子中是myproject),选择[属性],在弹出的对话框中,选择[配置属性]-->[C/C++]-->[预处理器],将[预处理到文件]该为[是],应用,确认. 2.在VS ...

  4. Hadoop离线项目介绍（不包括程序）

    一:项目场景 1.需求分析 根据用户行为数据进行程序的处理,得到结果保存到关系型数据库中 需要收集用户(系统使用者)在不同客户端上产生的用户行为数据,最终保存到hdfs上 需要明确收集字段的相关信息, ...

  5. nodejs 初入

    nodejs 模块路径 1.内置模块 如果传递给require函数的是NodeJS内置模块名称,不做路径解析,直接返回内部模块的导出对象,例:require('http'). 2. nodejs  支 ...

  6. C#的默认可访问性级别

    1.在namespace中的类.接口默认是internal类型的,也可以显示的定义为public类型,不允许是其他访问类型.2.在一个类里面,属性和方法默认是private的,可以显示的定义为publ ...

  7. JMeter学习-010-JMeter 配置元件实例之 - CSV Data Set Config 参数化配置

    众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...

  8. Extjs 表格横坐标显示问题

    在项目中显示chart时,当横坐标的标签名称过长时,extjs会自动隐藏部分的标签. 我想,如果能让标签斜着,或者纵向显示的话,就能够节省x轴上的长度. 经过在网上查找,解决方案如下. //在表格的a ...

  9. 网页内嵌入QQ通信组件，唤起QQ，针对不同平台的处理方式

    web浏览器中嵌入QQ通信组件,目前发现有两种方式,主要是区分 IOS平台(苹果系列)和其他平台(PC 安卓等……),下面是代码区别: <li><a href="http: ...

  10. [BS-31]导航控制器的interactivePopGestureRecognizer属性

    导航控制器的interactivePopGestureRecognizer属性 如何自定义导航控制器push出来的视图控制器的左侧返回按钮? 首先需要知道的是:如果要自定义push出来的VC的左侧返回 ...