码迷,mamicode.com
首页 > 其他好文 > 详细

使用@media实现IE hack的方法

时间:2017-09-14 21:49:04      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:post   div   sele   ie9   dev   pad   代码   bsp   一个   

网页制作Webjx文章简介:众所周知,有些时候为了实现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-spe  

       仅支持谷歌

       @media screen and (-webkit-min-device-pixel-ratio:0) {

        .footer .layout-help { padding-bottom:357px; } 

 

 

 

 

 

 

 

@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){} IE10--IE11

@media screen and (min-width:0\0){} IE9--IE11

@media screen\9 {} IE7及以下

@media \0screen\,screen\9 {} IE8及以下

@media \0screen {} IE8

@media screen\0 {} IE8及以上

使用@media实现IE hack的方法

标签:post   div   sele   ie9   dev   pad   代码   bsp   一个   

原文地址:http://www.cnblogs.com/qingqinglanlan/p/7522824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!