浏览器的兼容性一直是个头疼的问题，使用“欺骗”技术可使各个浏览器效果一致，花了些时间整理了各个浏览器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比较全面的记录下Hack，内容包括3部分：媒体查询 hack、属性Hack、选择器Hack，这些Hack已经测试并得到有效运用，有需要的同学可以放心使用，笔者会在以后不断的更新，如果有需要补充或者修改的，欢迎大家指教！

以下代码之间的空格是必要的，缺少空格导致失效

/*---------------------------------媒体查询hack [[---------------------------------*/

/* 只支持IE6、7 */

@media screen\9 {...}

/* 只支持IE8 */

@media \0screen {...}

/* 只支持IE6、7、8 */

@media \0screen\,screen\9 {...}

/* 只支持IE8、9、10 */

@media screen\0 {...}

/* 只支持IE9、10 */

@media screen and (min-width:0\0) {...}

/* 只支持IE10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}

/* 支持IE9、Chrome、Safari、Firefox、 Opera */

@media all and (min-width:0){...}

/* 只支持wekit内核浏览器Chrome、Safari */

@media screen and (-webkit-min-device-pixel-ratio: 0) {...}

/* 只支持Opera */

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...}

 /* 只支持Firefox */

@-moz-document url-prefix() {...}

如：

<p class="class">@hack@hack@hack@hack@hack@hack</p>

<style type="text/css">

@media all and (min-width:0){ /* 在IE9文本颜色为红色*/

 .class{color:#F00;}

} 

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在Chrome、Safari中文本颜色为绿色 */

 .class{color:#0F0;}

}

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在Opera中文本颜色为蓝色 */

 .class{color:#00F;}

}

@-moz-document url-prefix() { /* 在Firefox中文本颜色为品红色 */

 .class{color:#F0F;}

} 

</style>

/*---------------------------------媒体查询hack ]]---------------------------------*/

/*---------------------------------选择器hack [[---------------------------------*/

/* 只支持IE7 */

html* 选择器{}

/* 仅支持IE7  使用该选择器需要HTML顶部有声明：<!DOCTYPE HTML ......>*/

*+html  选择器{}

/* 只支持IE6 */

*html  选择器{}

如:

<p class="class">选择器hack选择器hack选择器hack选择器hack选择器hack选择器hack</p>

html* .class{color:#F00;} /* 在IE7中文本颜色为红色 */

*+html .class{color:#0F0;} /* 在IE7中文本颜色为绿色 */

*html .class{color:#00F;} /* 在IE6中文本颜色为蓝色 */

/*---------------------------------选择器 hack ]]---------------------------------*/

/*---------------------------------属性hack [[---------------------------------*/

/* 只支持IE6、7、8、9、10 */

选择器{属性：属性值\9;}

/* 只支持IE8、9、10 */

选择器{属性：属性值\0;}

/* 支持IE8的部分属性值、完全支持IE9、10 */

选择器{属性：属性值\9\0;}

/* 仅支持IE7和IE6 */

选择器{*属性：属性值;}

/* 只支持IE6 */

选择器{_属性：属性值;}

/* 只不支持IE6 */

选择器{属性：属性值!important;}

/* 仅支持Safari和Chrome ，且只能放在选择器的最后一个属性，因为当浏览器解析[;;]后，不会再读取后面属性 */

选择器{[;属性:属性值;]}

如：

<p class="class">属性hack属性hack属性hack属性hack属性hack属性hack</p>

<style type="text/css">

.class{

color:#F00\0;/* 在IE8和IE9中文本颜色为红色 */

*color:#0F0; /* 在IE7中文本颜色为绿色 */

_color:#00F; /* IE6中颜色为蓝色 */

[;color:#F0F;]/* 在Safari和Chrome中颜色为品红色 */

}

</style>

/*---------------------------------属性hack ]]---------------------------------*/

建议是：尽量写出无hack的结构和样式，做到可以向后兼容，减少多余代码，更加可以体现自己专业化的态度。

本文来源于https://www.cnblogs.com/PeunZhang/p/4089894.html#rgba_bug

CSS hack整理的更多相关文章

  1. css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  2. css hack整理 (摘)

    CSS Hack Table     Y 渲染 N 不渲染 H 部分版本或部分属性渲染 B 样式失效   windows Mobile Linux Mac IE Firefox Chrome Safa ...

  3. IE css hack整理

    CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果 ...

  4. css hack 整理

    <ul> <li>"_" ------ IE6</li> <li>"-" ------ IE6</li&g ...

  5. CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera

    CSS Hack大全-教你如何区分出IE6-IE10.FireFox.Chrome.Opera 转载自:http://www.jb51.net/article/50116.htm 现在的浏览器IE6- ...

  6. CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

    今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就 ...

  7. ie10 css hack 条件注释等兼容方式整理

    点评:ie10已经上线一段时间了,相信已经有一部分前端潮人体验过了,截至到现在,在ie6到ie9的浏览器各种各样的古怪行为,开发人员不得不使用条件注释,有条件的类,和其他特定于IE的css hack来 ...

  8. 前端CSS规范整理_转载、、、

    一.文件规范 1.文件均归档至约定的目录中. 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用U ...

  9. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

随机推荐

  1. 原生js监听input值发生变化

    原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 1) onchange 触发事件必须满足 ...

  2. 端口占用问题：java.net.BindException: Address already in use: bind

    解决方法 方法一:换一个端口 若仍然想要使用该端口,则可以将占用该端口的进程杀死即可. 方法二:杀死占用该端口的进程 若仍然想要使用该端口,则可以将占用该端口的进程杀死即可 查找端口被占用的进程id ...

  3. 使用ImagesPipeline时候报错为：ModuleNotFoundError: No module named 'scrapy.contrib'

    刚开始我是这样写的: 报错为: 哈哈,经过查阅资料,其实他是存在的,接下来修改如下: 经过运行结果如下: 问题解决,哈哈哈,搞定!!!!!!!!!!!!

  4. 「PKUWC2018/PKUSC2018」试题选做

    「PKUWC2018/PKUSC2018」试题选做 最近还没想好报THUSC还是PKUSC,THU发我的三类约(再来一瓶)不知道要不要用,甚至不知道营还办不办,协议还有没有用.所以这些事情就暂时先不管 ...

  5. win7远程服务器发生身份验证错误，要求的函数不受支持

    远程服务器发生身份验证错误,要求的函数不受支持,远程登录服务器以前都是正常的,今天登录远程桌面就一直是这样的错误.记录一下解决方法. 方法一:卸载补丁KB41037181.打开控制面板,找到“程序和功 ...

  6. Redis安装--CentOS7上安装Redis

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 1.R ...

  7. 移动端vue2.5去哪儿项目-常见问题整理

    一.项目中遇到的问题.难点及解决方式 1. 移动端开发中的1px边框问题,由于在不同设备屏幕上,可能会使得1px实际在移动端显示不是1px,怎么解决? 2. 移动端click点击事件,会延迟300ms ...

  8. 点击其它位置，div下拉菜单消失

    接下拉菜单那一篇: 加上点击其它位置,下拉菜单消失. 纯js写法: window.document.addEventListener('click', function(e) { var e = e ...

  9. springboot启动后执行一段代码的方式

    文章转载自: https://www.cnblogs.com/zuidongfeng/p/9926471.html https://blog.csdn.net/zknxx/article/detail ...

  10. Python学习日记(二) list操作

    l = ['a','b','c','d',1,2,[3,'e',4]] 1.list.append() 在list的结尾新增一个新的元素,没有返回值,但会修改原列表 l.append(5) print ...