ie11媒体查询以及其他hack

<!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

 
时间: 2024-10-11 05:42:40

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

@media和@import媒体查询hack

http://css.doyoe.com/ 媒体查询可以被用在CSS中的@media和@import规则上,也可以被用在HTML和XML中. 例如: @media screen and (width:800px){ … } @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="ex

bootstrap在ie8下,兼容媒体查询

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

解决媒体查询的响应式布局

众所周知,网页前端开发时兼容IE一直是很头疼的问题.今天接到一个需要响应式布局的问题,主要还要兼容IE8,9.在网上搜索了以下解决方案,现记录如下. 首先,加入代码 <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> 以解决IE8及以下

移动端zepot&amp;媒体查询media queries

使用zepot做轮播图<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>jd首页</title> <lin

media媒体查询器用法总结

一 设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这段代码的几个参数解释: • width = device-width:宽度等于当前设备的宽度 • initial-scale:初始的缩放

CSS3 Media Query 响应式媒体查询

在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的兼容性,省去了诸如浏览器判断之类的代码. 当然这种设计也存在着缺点,比如我所见的不少使用响应式布局的设计在适配移动端时大量使用 display:none 隐藏富媒体元素,这样势必会导致大量不必要的流量.因此,如果有较为重要的移动端需求,那么还是开发专门的移动版页面为好.不过,对于诸如内容较少的页面或

html5 响应式布局(媒体查询)

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

css媒体查询

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒

css3 媒体查询的学习。

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒