对着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过滤器之一是星号HTML Hark。IE的老版本(6-)有一个匿名的根元素,它包围着HTML元素。可以利用这点使用继承构建IE独有规则:

* html #content{ width:500px; }

子选择器Hark:使用旧版本IE不认识的子选择器Hark

html > body { background-image:url(bg.png); }

“_”是IE6专有的hack

“+”是IE7的

“\9” IE6/IE7/IE8/IE9/IE10都生效

“\0” IE8/IE9/IE10都生效,是IE8/9/10的hack

“\9\0” 只对IE9/IE10生效,是IE9/10的hack

浏览器的CSS各种hack,大汇总的更多相关文章

  1. IE6 浏览器常见兼容问题 大汇总(23个)

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  2. IE6 浏览器常见兼容问题 大汇总(23个)[转载]

    IE6以及各个浏览器常见兼容问题 大汇总 综述:虽然说IE6在2014年4月将被停止支持,但是不得不说的是,IE6的市场并不会随着支持的停止而立刻消散下去,对于WEB前端开发工程师来说,兼容IE6 兼 ...

  3. 【总结】CSS透明度大汇总

    近年来,CSS不透明算得上是一种相当流行的技术,但在跨浏览器支持上,对于开发者来说,可以说是一件令人头疼的事情.目前还没有一个通用方法,以确保透明度设置可以在目前使用的所有浏览器上有效. 这篇汇总主要 ...

  4. 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  5. css hack 大全 各个浏览器的css

    各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: ...

  6. 【必备】史上最全的浏览器 CSS & JS Hack 手册

    [必备]史上最全的浏览器 CSS & JS Hack 手册   浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技 ...

  7. 史上最全的浏览器 CSS & JS Hack 手册

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  8. hack (浏览器兼容css hack)

    1.hack的原理 由于不同的浏览器对CSS的支持及解析结果不一样,还由于CSS中的优先级的关系.我们就可以根据这个来针对不同的浏览器来写不同的CSS. CSS Hack大致有3种表现形式,CSS类内 ...

  9. 浏览器对DIV+CSS兼容性问题大总结

    浏览器对DIV+CSS兼容性问题大总结 接触DIV+CSS架构已经快两年了,个人觉得css入门不难,但要学精并非一朝一夕的,现在大部分网络公司都比较主张用div+css来布局,这就面临着一个比较难的问 ...

随机推荐

  1. Ubuntu无值守安装mysql

    1. 使用apt-get -d install 命令下载安装包, 其中-d表示下载不安装. 下载后的deb包放在/var/cache/apt/archives目录 2. 使用dpkg-preconfi ...

  2. epoll重要

    EPOLL事件分发系统可以运转在两种模式下:Edge Triggered (ET).Level Triggered (LT). LT是缺省的工作方式,并且同时支持block和no-blocksocke ...

  3. IOS中的UINavigationController(导航控制器)

    UINavigationController UINavigationControlle:导航控制器,是iOS中最常用的多视图控制器之一,它用来管理多个试图控制器 导航控制器可以认为是管理控制器的控制 ...

  4. Swift TabeleViewCell dequeueReusableCellWithIdentifier 使用的新的细节,原来现在可以这样

    今天在看官方的TableView Guide,突然想起来最近写的一个代码中实现tableViewCell复用的时候有点问题: var cell = UITableViewCell(style: UIT ...

  5. php捕获网络页面

    <?php $url = 'http://jwzx.cqupt.edu.cn/pubYxKebiao.php?type=zy&yx=06'; $html = file_get_conte ...

  6. eclipse插件开发中全局对象的获取

    转自:http://blog.csdn.net/liaomin416100569/article/details/7165425 1.获取系统默认的ShellShell shell = Platfor ...

  7. (转) ASCII码对应表chr(9)、chr(10)、chr(13)、chr(32)、chr(34)、chr(39)、chr(

    chr(9) tab空格       chr(10) 换行      chr(13) 回车        Chr(13)&chr(10) 回车换行       chr(32) 空格符      ...

  8. 目前国内外主流的linux发行版本

    1.linux其实是基于unix发展而来的,还有mac os也是类unix操作系统 2.目前主流的linux发行版本主要有:红帽系列(中国大陆,美洲地区,发源于美国),suse系列(欧洲地区流行,发源 ...

  9. C中的一些函数

    简述:printf.sprintf函数 转载自http://www.cnblogs.com/adslg/archive/2008/08/22/1274164.html 部分进行了修改,参考http:/ ...

  10. Android -- NDK开发入门

    第一步,建立一个普通的Android项目HelloNDK,然后在与src同一级的目录下新建一个jni目录: 第二步,在jni目录下新建一个hello_ndk.c文件,代码如下: #include &l ...