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
ie11媒体查询以及其他hack的更多相关文章
- 【译】PX、EM还是REM媒体查询?
原文链接:https://zellwk.com/blog/media-query-units/ 你有没有想过使用媒体查询的时候到底该用px.em还是rem作单位呢?我曾经也有同样的疑问,而且我到现在也 ...
- bootstrap在ie8下,兼容媒体查询
最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下: <!--[if lte ie 9]& ...
- CSS3 Media Query 响应式媒体查询
在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...
- 媒体查询(pc端,移动端不同布局)
媒体查询语法: 1.内联写法:and之后必须有空格@media screen and (min-width:960px //判断浏览器大小条件){body{background:red} //常规的样 ...
- 关于媒体查询 @Media Screen 与响应式
其实CSS2中已经有了媒体查询的概念,但是CSS3中媒体查询功能更加的强大! 首先,我们来看一个小例子 设置媒体查询的 Max Width ,改变窗口大小到600px的时候就会触发一下代码: @med ...
- 深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法 前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
- CSS3媒体查询使用小结
首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: 准备工作1:设置Meta标签 <meta name="viewport" content=& ...
- CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices (包括 苹果手表 apple watch)
/* ----------- iPhone 4 and 4S ----------- */ /* Portrait and Landscape */ @media only screen and (m ...
- iPhone的CSS3媒体查询
iPhone的CSS3媒体查询: 各版本的iPhone媒体查询是根据其分辨率和一些CSS3媒体查询的特性来实现媒体查询的...详见下: iPhone6的媒体查询: @media only screen ...
随机推荐
- hdu Virtual Friends
这题是一个很简单额并查集的题目,首先第一步是要用map将字符串映射为整型,这样方便后面的处理,然后就是用一个rank[]数组来记录每个朋友圈的人数.之后就是简单的并查集操作了. 这里给出一组测试案例: ...
- 让dede运行php代码和mysql语句
一.dede运行php代码 举例1: {dede:name runphp='yes'} $str = "hello ";@me = $str;@me .= "world& ...
- JAVA程序设计 实验一
北京电子科技学院(BESTI) 实 验 报 告 课程:Java程序设计 班级:1353 姓名:李海空 学号:20135329 成绩: 指导教师:娄嘉鹏 ...
- 【iCore3 双核心板_ uC/OS-III】例程一:认识 uC/OS-III
实验指导书及代码包下载: http://pan.baidu.com/s/1i4FuMep iCore3 购买链接: https://item.taobao.com/item.htm?id=524229 ...
- SQL简介
SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言 SQL 使我们有能力访问数据库 SQL 是一种 ANSI 的标准计算机语言 编者注:ANSI,美国国家标 ...
- Golang之sdl2学习之路(零) -- 环境工具准备
学习Golang有一段时间了,从毫无头绪到四处乱撞,再到如今静下心来安心学习sdl2也有小半年了. 今晚重构之前的学习代码,发现如果不写该文,可能会在以后回顾这段时间写的代码上花费时间,故以此文做一点 ...
- git pull all braches
控制台下执行如下: git branch -r | grep -v '\->' | while read remote; do git branch --track "${remote ...
- JMeter学习-004-WEB脚本入门实战
此文为 JMeter 入门实战实例.我是 JMeter 初学菜鸟一个,因而此文适合 JMeter 初学者参阅.同时,因本人知识有限,若文中存在不足的地方,敬请大神不吝指正,非常感谢! 闲话少述,话归正 ...
- JMeter学习-010-JMeter 配置元件实例之 - CSV Data Set Config 参数化配置
众所周知,在进行接口测试的过程中,需要创建不同的场景(不同条件的输入,来验证不同的入参的返回结果).因而,在日常的自动化接口监控或商品监控等线上监控过程中,需要配置大量的入参来监控接口的返回是否正确. ...
- js展开一颗树
Tree View 指令不支持 树结构数据源, 只支持单层数组.(也许是我没发现,人家可以设置) .我只能把树展开,变成单层数组.然后还要记录已经递归到第一层了.比如这样. <!doctype ...