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

    路径问题,可能是没有配置这一行:

  2. Mysql数据库索引IS NUll ，IS NOT NUll ，！= 是否走索引

    声明在前面 总结就是 不能单纯说 走和不走,需要看数据库版本,数据量等 ,希望不要引起大家的误会,也不要被标题党误导了. 1 数据库版本: 2 建表语句 CREATE TABLE s1 ( id IN ...

  3. Linux+QT界面开发（含数据库）小结

    今天十一国庆节,过了一个很有意义的国庆节,去了龙岗区图书馆,第一次知道了借的书可以在任意分馆归还!这个切实方便了广大读者.针对Linux应用,特意借阅一本:<linux环境下Qt4图形界面与My ...

  4. 【LEETCODE】44、509. Fibonacci Number

    package y2019.Algorithm.array; /** * @ProjectName: cutter-point * @Package: y2019.Algorithm.array * ...

  5. css页面加载动画

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. Spring Cloud Alibaba学习笔记（18） - Spring Cloud Gateway 内置的过滤器工厂

    参考:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.1.0.RELEASE/single/spring-clou ...

  7. 缺陷的背后（四）---多进程之for循环下fork子进程引发bug

    导语 业务模块为实现高并发时的更快的处理速度,经常会采用多进程的方式去处理业务.多进程模式下常见的三种bug:for循环下fork子进程导致产生无数孙子进程,僵尸进程,接口窜包.本章主要介绍第一种常见 ...

  8. C++使用代码创建一个Windows桌面应用程序

    WinMain函数 Windows应用程序的唯一程序入口. 函数原型 int WINAPI WinMain { HINSTANCE hInstancem HINSTANCE hPreInstance, ...

  9. pip install scrapy 报错

    最近在研究Python,安装scrapy过程中报错如下图: 尝试找了一下解决方式:下载已经编译好的.whl安装包 步骤如下: 1.下载与Python版本和系统版本相匹配的Twisted包,网址:htt ...

  10. NIO开发Http服务器（2）：项目结构

    最近学习了Java NIO技术,觉得不能再去写一些Hello World的学习demo了,而且也不想再像学习IO时那样编写一个控制台(或者带界面)聊天室.我们是做WEB开发的,整天围着tomcat.n ...