使用@media实现IE hack的方法
Posted ++码园++
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用@media实现IE hack的方法相关的知识，希望对你有一定的参考价值。
网页制作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的方法的主要内容，如果未能解决你的问题，请参考以下文章