所谓Medial Queries就是媒体查询。

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。

众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的。比如说使用“\0”,“\”和“\9”来仅让IE某些版本识别,而对于现代浏览器来说,他会直接无视这些代码。今天我想为大家介绍的是使用@media实现IE hack的方法.

仅IE6和IE7识别

@media screen\9 {
.selector { property: value; }
}

仅IE6和IE7、IE8识别

@media \0screen\,screen\9 {
.selector { property: value; }
}

仅IE8识别

@media \0screen {
.selector { property: value; }
}

仅IE8-10识别

@media screen\0 {
.selector { property: value; }
}

仅IE9和IE10识别

@media screen and (min-width:0\0) {
.selector { property: value; }
}

仅IE10识别

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}

上面几个@media配合“\”、“\0”和“\9”就能让不同版本的IE识别,那么具体项目中我们要怎么使用呢?

打个比方,如果你的body中设置了一个红色的背景,而想让不同版本IE变成别的颜色,那么我们就可以这么操作

body {
background: red;
} /* IE6、IE7变成绿色 */
@media all\9 {
body {
background: green;
}
} /* IE8变成蓝色 */
@media \0screen {
body {
background: blue;
}
}
/*IE9和IE10变成黄色*/
@media screen and (min-width:0\0) {
body {
background: yellow;
}
}

IE的Hack方法我向来不提倡使用,但这些方法很少有人知道,贴上来与大家分享,希望在不得已的情况之下,这些hack方法能帮你解决问题。

Web页面制作中尽量不要使用CSS Hack来处理兼容问题。因为任何浏览器下出现渲染不一致都极有可能是我们自己的结构或样式不符合W3C的某些要求,或者说违背了浏览器的某些规则而先造成的,所以我们应该尽量通过结构或CSS的修改来达到各浏览器渲染一致效果,除非到了万不得已情况下,才考虑CSS的Hack。

CSS之Medial Queries的另一用法:实现IE hack的方法的更多相关文章

  1. Medial Queries的另一用法——实现IE hack

    众所周知,有些时候为了实现IE下的某些效果与现代浏览器一致,我们不得不使用一些hack手段来实现目的.比如说使用"\0","\"和"\9"来 ...

  2. Medial Queries的另一用法:实现IE hack的方法

    所谓Medial Queries就是媒体查询. 随着Responsive设计的流行,Medial Queries可算是越来越让人观注了.他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设 ...

  3. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  4. css ::before和::after伪元素的用法

    css ::before和::after伪元素的用法:http://blog.dimpurr.com/css-before-after/

  5. CSS中:before和:after选择器的用法

    在线演示这次给大家带来的是对话气泡效果,主要是演示了 :before / :after 和 border 的用法,赶快来围观吧. 阅读原文:CSS中:before和:after选择器的用法

  6. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. 使用CSS中的meta实现web定时刷新或跳转的方法

    这篇文章主要介绍了使用CSS中的meta实现web定时刷新或跳转的方法,比使用JavaScript脚本实现起来更加简单一些,需要的朋友可以参考下 meta源信息功能之页面定时跳转与刷新 几乎所有的网页 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法(转)

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法及优缺点分析

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

随机推荐

  1. [bug]”System.InvalidProgramException:公共语言运行时检测到无效程序“解决方案

    Visual Studio 2017版本15.8.x运行某些程序会报这样的错误:“System.InvalidProgramException:公共语言运行时检测到无效程序” 此问题的临时解决方案: ...

  2. cad2013卸载/安装失败/如何彻底卸载清除干净cad2013注册表和文件的方法

    cad2013提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装cad2013失败提示cad2013安装未完成,某些产品无法安装,也有时候想重新安装cad2013 ...

  3. Swift5 语言指南(十一) 结构和类

    结构和类是通用的,灵活的结构,它们成为程序代码的构建块.您可以使用与定义常量,变量和函数相同的语法来定义属性和方法,以便为结构和类添加功能. 与其他编程语言不同,Swift不要求您为自定义结构和类创建 ...

  4. localStorage 存满了怎么办?

    先来几道面试题 1.a.meituan.com 和 b.meituan.com 这两个域能够共享同一个 localStorage 吗? 2.在 webview 中打开一个页面:i.meituan.co ...

  5. 彻底理解Java中的基本数据类型转换(自动、强制、提升)

    说基本数据类型转换之前,先了解下 Java 中的 8 种基本数据类型,以及它们的占内存的容量大小和表示的范围,如下图所示. 重新温故了下原始数据类型,现在来解释下它们之间的转换关系. 自动类型转换 自 ...

  6. Python爬虫——selenium模块

    selenium模块介绍 selenium最初是一个测试工具,而爬虫中使用它主要是为了解决requests无法直接执行JavaScript代码的问题 selenium本质是通过驱动浏览器,完全模拟浏览 ...

  7. requestAnimFrame 动画的使用方法

    //requestAnimFrame 封装,可以兼容所有浏览器 window.requestAnimFrame = (function(){ return window.requestAnimatio ...

  8. 安装Elasticsearch中Head插件并使用

    基础环境 Elasticsearch集群搭建请参考前一篇文章http://www.cnblogs.com/aubin/p/8012840.html 系统 节点名 IP 软件版本 CentOS7.3 e ...

  9. UFLDL 教程学习笔记(四)主成分分析

    UFLDL(Unsupervised Feature Learning and Deep Learning)Tutorial 是由 Stanford 大学的 Andrew Ng 教授及其团队编写的一套 ...

  10. Django中条件过滤:按时间筛选

    你有没有遇到过,需要按时间筛选的问题? 我在models中的字段为dateTimeField,那么我该如何构造一个时间格式来和它比较呢? 索性我们有datetime模块 import datetime ...