IE HACK之@media hack

IE HACK\0 \9对于css处理有些css3属性有点心有余而力不足。譬如对于半透明的处理:支持rgba的IE9+的IE浏览器使用rgba不支持的IE8以下使用滤镜。

而 @media rule hacks 确能很好得解决这个问题 。

  • 针对 IE 6 and 7

    @media screen\9 {
        body { background: red; }
    } 
    
  • 针对 IE 6, 7 and 8

    @media \0screen\,screen\9 {
        body { background: green; }
    } 
    			
  • 针对IE 8

    @media \0screen {
        body { background: blue; }
    }
    			
  • 针对IE 8, 9 and 10

    @media screen\0 {
        body { background: orange; }
    } 
    			
  • 针对IE 9 and 10

    @media screen and (min-width:0\0) {
        body { background: yellow; }
    } 
    			
  • 针对 IE 10

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
       /* IE10-specific styles go here */  
    } 			

那对于半透明的遮罩层我们可以如下处理:

.dialog_mask{
	position:fixed;
	width:100%;
	height:100%;
	display:block;
	left:0;top:0;
	background:rgba(0,0,0,.4);
	_position:absolute;
	_width:expression(eval(document.documentElement.clientWidth));
	_height:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight))
}
@media \0screen\,screen\9 {
	.dialog_mask{ 
		background:url(about:blank); 
		filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000,endcolorstr=#66000000)
	}
}
	

参考文章

本文源链接:http://www.html5jscss.com/ie-media-hack.html

转载请注明《IE HACK之@media hack》| html5jscss

评论关闭了.