浏览器的兼容性一直是个头疼的问题，使用“欺骗”技术可使各个浏览器效果一致，花了些时间整理了各个浏览器的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. 【Linux】Linux下进程间的通信方式

    本文内容: 1.进程通信的目的 2.介绍Linux下进程间的4种通信方式:管道,消息队列,共享内存,信号量 ps:套接字也可以用于进程间的通信,不过是不同物理机器上的进程通信,本章讨论是是同一台物理机 ...

  2. Mysql中的读锁，写锁，乐观锁及事务隔离级别和并发问题

    mysql读锁,写锁,乐观锁 读锁,也叫共享锁(shared lock) SELECT * FROM table_name  WHERE ...  LOCK IN SHARE MODE 写锁,也叫排他 ...

  3. Linux中buff/cache内存占用过高解决办法

    在Linux系统中,我们经常用free命令来查看系统内存的使用状态.在一个centos7的系统上,free命令的显示内容大概是这样一个状态: 这个命令几乎是每一个使用过Linux的人必会的命令,但越是 ...

  4. Prometheus入门到放弃(4)之cadvisor监控docker容器

    Prometheus监控docker容器运行状态,我们用到cadvisor服务,cadvisor我们这里也采用docker方式直接运行. 1.下载镜像 [root@prometheus-server ...

  5. 模型层之ORM、数据库和单表操作

    一.ORM简介 ORM是“对象-关系-映射”的简称,一般指持久化数据和实体对象的映射 1.1 什么是“持久化” 持久(Persistence),即把数据(如内存中的对象)保存到可永久保存的存储设备中( ...

  6. 不一样的go语言-athens源码概览

    前言   上一篇文章介绍了athens私服的安装以及vgo download protocol的简要介绍.本文着重介绍go proxy sever的实现原理以及athens是如何实现的. go get ...

  7. LOJ3123 CTS2019 重复 KMP自动机、DP、多项式求逆

    传送门 CTS的计数题更完辣(撒花 Orz zx2003,下面的内容在上面的博客基础上进行一定的补充. 考虑计算无限循环之后不存在子串比\(s\)字典序小的串的个数.先对串\(s\)建立KMP自动机, ...

  8. JS去除字符串左右两端的空格(转载)

    来源:https://www.cnblogs.com/fanyf/p/3785387.html var str='     测试     '; 一.函数 <script type="t ...

  9. ScheduledExecutorService周期性的定时任务

    从j2se的api文档上查看ScheduledExecutorService的方法都是推迟一段时间然后相隔一段时间之后再去执行,没有想Timer定时器一样的可以在定点时间执行的api,如果也想像Tim ...

  10. 实现Feign请求拦截器，对请求header等参数进行转发

    参考:Feign传递请求头信息(Finchley版本) 问题:通过Feign远程调用服务,无法传递header参数. 解决方式:实现RequestInterceptor接口(对所有的Feign请求进行 ...