实例代码:使用@media实现IE hack的方法

2024-07-11 09:01:37

字体：大中小

来源：转载

供稿：网友

武林网(www.vevb.com)文章简介：众所周知，有些时候为了实现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方法能帮你解决问题，特别是国内的苦逼前端人员。

上一篇：CSS网页制作技巧:DIV+CSS网页布局常犯错误汇总

下一篇：CSS网页代码实例:浏览器顶部有阴影