码迷,mamicode.com
首页 > Web开发 > 详细

浏览器的CSS各种hack,大汇总

时间:2015-03-19 16:06:15      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:

对着IE久了也有感觉了,在win10出新浏览器以及中国的IE6+用户没有普及新的浏览器前IE还是个坑,所以hack这东西还是要掌握一点的。不废话直接贴图

技术分享

记得之前在项目里面针对IE6的hack是这样写的_bakcground:#fff;其实这只是能给IE6用罢了。

黄色部分为选择器hack


IE 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开启旧的模式测试的,可以像我一样一行一行注释掉测试。


FireFox 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">
@-moz-document url-prefix(){
    body{
        background:#ccc;
    }
}
</style>
</head>
<body>
    <p>manfred Hu</p>
</body>
</html>

Chrome and Safari and Opera 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">
@media screen and (-webkit-min-device-pixel-ratio:0){
    body{
        background:#ccc;
    }
}
</style>
</head>
<body>
    <p>manfred Hu</p>
</body>
</html>

 这个hack是除了FireFox和IE之外其他浏览器都支持的。这是拉阵营的节奏?

所有代码亲测有效,有错的地方欢迎指出。^_^

 

浏览器的CSS各种hack,大汇总

标签:

原文地址:http://www.cnblogs.com/huwenfeng/p/4350635.html

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