浏览器的兼容性一直是个头疼的问题，使用“欺骗”技术可使各个浏览器效果一致，花了些时间整理了各个浏览器的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. C++ 制作一个“测运”小游戏-rand()函数的应用

    游戏说明: 游戏名:Lucky Guy 玩法说明:有2种模式可以选择,一种是一直选择数字,直到抽到炸弹为止.另一种是在0~9个数字中进行选择,有5个炸弹,最高分为5,抽到炸弹即游戏结束.游戏结束后,可 ...

  2. Flask总结篇

    1 Flask框架的优势? 相信做Python这一块的程序员都有听说这三个框架,就像神一样的存在,每一个框架的介绍我就不写出来了,感兴趣可以自己百度了解了解!下面我就说正事 Django:Python ...

  3. 【scratch3.0教程】1.3 了解scratch界面内容

    第3课 了解Scratch界面内容 1.认识Scratch界面 双击桌面快捷方式,启动Scratch程序.我们来认识一下Scratch界面吧! (1)指令区 Scratch程序一共有运动.外观.声音. ...

  4. Harbor 企业级私有仓库 Ubuntu16.04 搭建及使用

    一.Harbor简介 1.1.什么是Harbor 几个VMware中国的人搞了一个容器镜像仓库.Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器. 1.2.Harbor架 ...

  5. VisualStudio 连接 MySql 实现增删查改

    首先创建数据库,建立一个用户登录表 2.visualStudio默认是不支持MySql的,要想通过Ado.Net 操作MySql 需要在管理NeGet包添加对MySql.Data  和 MySql.D ...

  6. c# Path.Combine

    Path.Combine: c#获取当前项目路径 : //获取包含当前执行的代码的程序集的加载文件的完整路径 var appPath = System.IO.Path.GetDirectoryName ...

  7. C# vb .net实现亮度调整特效滤镜效果

    在.net中,如何简单快捷地实现Photoshop滤镜组中的亮度调整呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一步 ...

  8. JAVA相关知识

    1.CopyOnWrite (1).在写操作的线程,会将数组复制出来一份进行操作.而原本的数组不会做改变. (2)读线程则不会受到影响,但是可能读到的是一个过期的数据. 在juc(java.util. ...

  9. git下，输入git log 进入log 怎么退出

    解决方案: 英文状态下按Q就可以了 ctrl + c (应该是Linux命令中断的意思,很多中断都是这个命令). Paste_Image.png

  10. MySQL Transaction--网络丢包导致长时间未提交事务

    TCP三次握手(Three-Way Handshake) 建立一个TCP连接时,需要客户端和服务端总共发送3个包以确认连接的建立. TCP三次握手:第一次握手:Client将标志位SYN置为1,随机产 ...