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

随着Responsive设计的流行,Medial Queries可算是越来越让人观注了。他可以让Web前端工程实现不同设备下的样式选择,让站点在不同的设备中实现不同的效果。这个早前在w3cplus已经介绍过,如果你还没有接触,不仿点击这里详细阅读。今天在看blog时发现一个其他的使用方法,就是利用@media来做一些IE下的特殊效果。

众所周知,有些时候为了实现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方法能帮你解决问题,特别是国内的苦逼前端人员。

使用@media实现IE hack的方法的更多相关文章

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

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

  2. 利用@media实现IE hack

    虽然对IE深恶痛绝,却不能拒绝. 使用@media实现IE hack的方法,以记之. 仅IE6和IE7识别@media screen\9 { .selector { property: value; ...

  3. CSS之Medial Queries的另一用法:实现IE hack的方法

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

  4. CSS HACK的方法

    所有浏览器 通用 height: 100px; IE6 专用 _height: 100px; IE7 专用 *+height: 100px; IE6.IE7 共用 *height: 100px; IE ...

  5. media server died的解决方法【转】

    本文转载自:https://blog.csdn.net/class_brick/article/details/78086261 在对MediaRecord进行初始化时添加上 mMediaRecord ...

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

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

  7. 媒体查询hack

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

  8. C#中Windows Media Player控件使用实例|方法

    Windows Media Player控件Windows Media Player是一种媒体播放器,可以播放当前最流行的音频.视频文件和大多数混合型的多媒体文件.为了便于程序的开发,Visual S ...

  9. CSS3与页面布局学习总结(四)——页面布局大全BFC、定位、浮动、7种垂直居中方法

    目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...

随机推荐

  1. Android Capture Android System Audio

    项目需要获取播放视频的实时音量值,最简捷的方法是监听音频输出端,取得音频输出流,再进行转换. 调查时,首先找到这篇博客: http://blog.csdn.net/jinzhuojun/article ...

  2. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  3. Hbase学习记录(2)| Shell操作

    查看表结构 describe '表名' 查看版本 get '表名','zhangsan'{COLUMN=>'info:age',VERSIONS=>3} 删除整行 deleteall '表 ...

  4. js运动 摩擦运动

    <!DOCTYPE HTML> <HTML> <meta http-equiv="Content-Type" content="text/h ...

  5. InfiniBand

    Mellanox InfiniBand卡线缆性能延迟性测试程序源码,C源码实现操作mysql库,实现简单的增删改查,代码当前用的是增插入20000条数据 具体见源码 #include <mysq ...

  6. Java ClassLoader 原理详细分析

    一.什么是ClassLoader? 大家都知道,当我们写好一个Java程序之后,不是管是CS还是BS应用,都是由若干个.class文件组织而成的一个完整的Java应用程序,当程序在运行时,即会调用该程 ...

  7. HD2025查找最大元素

    查找最大元素 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submis ...

  8. 操作失败,没有该服务权限![ 机构号:99 ,用户ID:50000009 ,服务号:0101030112 ]

    操作失败,没有该服务权限![ 机构号:99 ,用户ID:50000009 ,服务号:0101030112 ] 此时我们可以把代码 SERVICE_NO 改成 10个0 即 0000000000 ,就可 ...

  9. JQ的each

    写法一:遍历JSON数据 $.each(JSON.parse("{" + msg.d + "}"), function (key, name) { //处理得到 ...

  10. 清除SQL Management Studio记住的用户名和密码

    SQL Server Management Studio 2008 delete the file C:\Users\%username%\AppData\Roaming\Microsoft\Micr ...