文档章节

使用@media实现IE hack的方法...

浮世微凉
 浮世微凉
发布于 2015/11/27 10:54
字数 603
阅读 272
收藏 0

随着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方法能帮你解决问题,特别是国内的苦逼前端人员。

本文转载自:http://www.alixixi.com/web/a/2013052488881.shtml

共有 人打赏支持
浮世微凉
粉丝 1
博文 13
码字总数 2789
作品 0
浦东
程序员
IE10的CSS技巧(IE10专属css hack写法)

本文源自:IT屌丝,码农之家 微软宣布IE10 将不支持条件注释。他们的历史,这显然是一个冒险的举动。截至目前,针对古怪的行为在IE6-9,开发人员已经使用条件的意见,有条件的类,以及其他I...

it_hack
2013/04/17
6.2K
2
IE之不完全罪状(持续更新)

开始之前先说点题外话。 如国内浏览器特别多,而且都是包壳。这些浏览器一般来讲为了保证浏览器兼容性都会默认使用webkit内核进行渲染,再特殊情况使用ie内核。 用过一些这样的浏览器都知道它...

-鹏
2016/06/04
62
0
各种浏览器CSS Hack的原理是什么?

CSS Hack的原理是什么 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 CSS Hack大致有3种表现形式,CSS类...

webas
2013/04/20
0
1
IE6、IE7、IE8、Firefox兼容性CSS HACK问题

通俗地讲:CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug误差(比如我们常说错位)的处理。 由于各浏览器的内核不同,所以会造成一些误差就像JS一样,一个JS网页特效,...

仁Z旅途
2013/08/19
0
5
跨浏览器开发经验总结(二) —— CSS

css hack的使用 CSS类级别的hack仅IE7识别 +html {…} IE6及IE6以下识别 html {…} opera、safari、chrome识别: @media all and (min-width: 0px){…} //Firefox3.0.6不识别,但Firefox3.6也......

leenash
2010/09/08
258
2

没有更多内容

加载失败,请刷新页面

加载更多

Confluence 6 识别慢性能的宏

Page Profiling 给你了有关页面在载入的时候操作缓慢的邪教,你可以将下面的内容添加到调试(debug)级别: Version 3.1 及其后续版本 设置包名字为 com.atlassian.renderer.v2.components.M...

honeymose
14分钟前
0
0
day93-20180920-英语流利阅读-待学习

时尚之觞:外表光鲜靓丽,其实穷得要命 Lala 2018-09-20 1.今日导读 讲到时尚界,我们脑海里浮现的可能都是模特和设计师光鲜靓丽、从容潇洒的模样。可是,最近在法国出版的一本书却颠覆了我们...

飞鱼说编程
29分钟前
0
0
maven的pom.xml用解决版本问题

maven管理库依赖,有个好处就是连同库的依赖的全部jar文件一起下载,免去手工添加的麻烦,但同时也带来了同一个jar会被下载了不同版本的问题,好在pom的配置里面允许用<exclusion>来排除一些...

JAVA码猿
53分钟前
1
0
20180920 rzsz传输文件、用户和用户组相关配置文件与管理

利用rz、sz实现Linux与Windows互传文件 [root@centos01 ~]# yum install -y lrzsz # 安装工具sz test.txt # 弹出对话框,传递到选择的路径下rz # 回车后,会从对话框中选择对应的文件传递...

野雪球
今天
2
0
OSChina 周四乱弹 —— 毒蛇当辣条

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 达尔文:分享花澤香菜/前野智昭/小野大輔/井上喜久子的单曲《ミッション! 健?康?第?イチ》 《ミッション! 健?康?第?イチ》- 花澤香菜/前野智...

小小编辑
今天
42
11

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部