标签:
对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的。不废话直接贴图
记得之前在项目里面针对IE6的hack是这样写的_bakcground:#fff;其实这只是能给IE6用罢了。
黄色部分为选择器hack
IE系列浏览器的hack大略如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> body{ /*普通的背景——大家都懂的 */ /*background:#ccc;*/ /*IE5到IE10的背景*/ /* background:#f00\9;*/ /*IE8+*/ /*background:#f00\0;*/ /*只有IE8*/ /*background:#f00\0/;*/ /*IE5,IE6,IE7*/ /**background:#0f0; */ /*IE5,IE6,IE7*/ /*+background:#0f0; */ /*IE5,IE6,IE7*/ /*@background:#0f0; */ /*IE5,IE6,IE7*/ /*>background:#0f0; */ /*IE5,IE6,IE7*/ /*/background: orange;*/ /*IE5,IE6,IE7*/ /*#background:#9d55b8; */ /*IE5,IE6*/ /*_background:#00f;*/ } /*IE9,IE10*/ :root body{background:#f00\9; }; </style> </head> <body class="demo"> <p>manfred Hu</p> </body> </html>
其中IE6因为IE没有自带所以下了个浏览器专门测试,其他为IE开启旧的模式测试的,可以像我一样一行一行注释掉测试。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> @-moz-document url-prefix(){ body{ background:#ccc; } } </style> </head> <body> <p>manfred Hu</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> @media screen and (-webkit-min-device-pixel-ratio:0){ body{ background:#ccc; } } </style> </head> <body> <p>manfred Hu</p> </body> </html>
这个hack是除了FireFox和IE之外其他浏览器都支持的。这是拉阵营的节奏?
所有代码亲测有效,有错的地方欢迎指出。^_^
标签:
原文地址:http://www.cnblogs.com/huwenfeng/p/4350635.html