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

    题目 977. Squares of a Sorted Array Given an array of integers A sorted in non-decreasing order, retur ...

  2. Java多线程编程之读写锁【ReentrantReadWriteLock】

    有时候我们需要有这样的需求:        对于同一个文件进行读和写操作,普通的锁是互斥的,这样读的时候会加锁,只能单线程的读,我们希望多线程的进行读操作,并且读的时候不能进行写操作,写的时候不能进行 ...

  3. go 学习笔记（4） package

    package name 尽量与目录名称一样 package name: 表示代码文件所属的包

  4. 不是所有OutOfMemoryError异常都跟内存有关

    一个老鸟遇到一个稀奇的问题后,如果只是想想,那么可能会失去一次丰富自己的机会. 如果从开始养成一个习惯,把所有难解决的问题都记录下来,面试的时候,也可能是给自己一次机会 *************** ...

  5. bootstrap-datetimepicker 日期控件起始时间和结束时间

    项目中经常会用到起止时间,如下图: 需要引用以下几个文件: <link href="~/lib/bootstrap/dist/css/bootstrap.min.css" r ...

  6. SharePoint中用Power shell命令修改文档的创建时间

    第一步:pnp组件连接到SharePointConnect-PnpOnline -url 网站地址 第二步:查出文档库及文档库下所有的文件 Get-PnPListItem -List 文档库名称 第三 ...

  7. MVC模式和Maven项目构建

    1.    尽管Servlet + JSP可以完成全部的开发工作,但是代码耦合度高.可读性差.重用性不好,维护.优化也不方便.所以才有了MVC. MVC是当前WEB开发的主流模式,核心是使用Strut ...

  8. app后端设计（php）

    来源:http://blog.csdn.net/column/details/mobilebackend.html?page=1 做了3年app相关的系统架构,api设计,先后在3个创业公司中工作,经 ...

  9. 根据值获取枚举类对象工具类EnumUtils

    枚举类 public enum Sex { man("M","男"),woman("W","女"); private S ...

  10. Linux之redis-cluster

    一,为什么要用redis-cluster 1.并发问题 redis官方生成可以达到 10万/每秒,每秒执行10万条命令假如业务需要每秒100万的命令执行呢? 2.数据量太大 一台服务器内存正常是16~ ...