网上有很多关于IE6/7/8, Firefox, Safari, Chrome, Opera CSS Hack的文章,但我觉得太过繁杂,要不给出一张看也看不懂的CSS Hack归纳表,要不就是给出一大堆代码说明问题,不便于学习与使用。我根据自己的使用情况来简单地归纳了一下IE6/7/8, Firefox, Safari, Chrome, Opera的CSS Hack使用方法,希望会对大家有用。

CSS Hack1:把IE6/7/8与其它浏览器区别开来

在css代码属性值后面加上“\9”(不包括双引号),如:

123#div {margin-top: 15px\9;}

*这样“margin-top: 15px”属性只有IE6/7/8浏览器能读出来。

CSS Hack2:针对IE6和IE7

在css代码的属性名称前加“*”(不包括双引号),如:

123#div {*margin-left: 15px;}

*这样“margin-left: 15px”属性只有IE6/7浏览器能读出来。

CSS Hack3:单独针对IE6

在css代码的属性名称前加“_”(不包括双引号),如:

123#div {_width: 15px;}

*这样“width: 15px”属性只有IE6浏览器能读出来。

CSS Hack4:单独针对IE7

在css代码的属性值后面加“ !important”(不包括双引号),如:

123#div {height: 18px !important;}

*这样“height: 18px”属性只有IE7浏览器能读出来。

CSS Hack5:单独针对IE8

在css代码的属性值后面加“\0”(是斜杠加零,不包括双引号),如:

123#div {background: green\0;}

*这样“background: green”属性只有IE8浏览器能读出来。

CSS Hack6:单独针对Firefox

把针对Firefox的CSS代码写在下面CSS函数的大括号之间
@-moz-document url-prefix(){ /*CSS代码*/  },如:

123@-moz-document url-prefix(){#main {background: red; }}

*这样id号为“main”的Html元素只有在Firefox中才会显示出“background: red”的效果。

CSS Hack7:单独针对Opera

把针对Opera的CSS代码写在下面CSS函数的大括号之间
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

123@media alland (-webkit-min-device-pixel-ratio:10000), not alland (-webkit-min-device-pixel-ratio:0){#content {background: url(http://guandian.co/logo.jpg) no-repeatcentertop;} }

*这样id号为“content”的Html元素只有在Opera中才会显示出“background: url(http://guandian.co/logo.jpg) no-repeat center top”的效果。

CSS Hack8:针对Safari和Google Chrome

把针对Safari和Google Chrome的CSS代码写在下面CSS函数的大括号之间
@media screen and (-webkit-min-device-pixel-ratio:0){/*CSS代码*/ },如:

123@media screenand (-webkit-min-device-pixel-ratio:0){#picture {background: url(http://guandian.co/mypic.gif) no-repeatcentertop;}}

*这样id号为“picture”的Html元素只有在Safari和Google Chrome中才会显示出“background: url(http://guandian.co/mypic.gif) no-repeat center top”的效果。但是如果Safari和Google Chrome内核版本不一样的话,CSS显示效果也会有所偏差。

以上是我自己归纳出来的CSS Hack,但是由于本人技术水平有限,还有很多不完整或是不尽合理的地方,请大家提出来,谢谢。

CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)的更多相关文章

  1. 史上最全的css hack(ie6-9,firefox,chrome,opera,safari) (zz)

    在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面.javascript我这次就不谈了,先说说css.       ...

  2. CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera

    转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...

  3. IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

    浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...

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

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

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

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

  6. IC卡读卡器web开发,支持IE,Chrome,Firefox,Safari,Opera等主流浏览 器

    IC卡读卡器在web端的应用越来越多,但是早期发布的ocx技术只支持IE浏览器,使用受到了很多的限制.IC卡读卡器云服务的推 出,彻底解决了以上的局限,使得IC卡读卡器不仅可以应用在IE浏览器上,还可 ...

  7. [转]JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本

    js根据浏览器的useAgent来判断浏览器的类型 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. JavaScript语法:navigator.use ...

  8. RF1001: 各浏览器对 '@font-face' 规则支持的字体格式不同,IE 支持 EOT 字体,Firefox Safari Opera 支持 TrueType 等字体

    http://w3help.org/zh-cn/causes/RF1001 http://blog.csdn.net/agileclipse/article/details/12450949 http ...

  9. 兼容IE6/IE7/IE8/FireFox的css hack

    兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...

随机推荐

  1. 【Android】监听Notification被清除

    前言 一般非常驻的Notification是可以被用户清除的,如果能监听被清除的事件就可以做一些事情,比如推送重新计数的问题. 声明 欢迎转载,但请保留文章原始出处:)  博客园:http://www ...

  2. C++语言-05-三大特性

    概述 C++ 是面向对象的语言,具备 OOP 的基本特性. 封装 概念 将数据和操作数据的函数绑定在一起 作用 避免受到外界的干扰和误用,确保了安全 与封装相关的概念 数据抽象 仅向用户暴露接口而把具 ...

  3. JAVA中的枚举小结

    枚举 将一组有限集合创建为一种新的类型,集合里面的值可以作为程序组件使用: 枚举基本特性 以下代码是枚举的简单使用: 使用values方法返回enum实例的数组 使用ordinal方法返回每个enum ...

  4. 将long数字序列化为json时,转换为字符串

    由于javascript中所有数字都是64位的浮点数,所以整数只能精确的表示53bit长的数字. 在从server得到的json数据中,有ID是长整数类型,在客户端根据此ID生成的link也是不准确的 ...

  5. Innodb行锁源码学习(一)

    Innodb是mysql数据库中目前最流行的存储引擎,innodb相对其它存储引擎一个很大的特点是支持事务,并且支持行粒度的锁.今天我重点跟大家分享下innodb行锁实现的基础知识.由于篇幅比较大,文 ...

  6. Rac grid用户启停监听报错无权限

    [grid@max1 ~]$ lsnrctl stop LSNRCTL for Linux: Version 11.2.0.3.0 - Production on 04-NOV-2016 00:20: ...

  7. 第三题 有如下Student 对象, private String name; private int age; private int score; private String classNum; 其中,classNum 表示学生的班号,例如“class05”。 有如下List List list = new ArrayList();

    list.add(new Student("Tom", 18, 100, "class05")); list.add(new Student("Jer ...

  8. MySQL基础学习(二) 常用SQL命令

    一. 1. select version();  查看数据库版本 2. select user(); 查看当前用户 3. select now(); 查看当前时间 4. show databases; ...

  9. 前端构建工具gulp介绍

    2016年3月3日 10:46:08     晴 前端构建工具gulpjs的使用介绍及技巧 gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简 ...

  10. Linux下使用NDK编译FFMPEG(libstagefright)

    这个月要负责一个项目,使用FFMPEG渲染视频,主要是Android端的,由于性能要求,要使用硬解码,但网上大多数教程都是没有libstagefright的,所以个人觉得,生成的so库文件也是没有开启 ...