CSS IE6/7/8, Firefox, Safari, Chrome, Opera Hack使用简要归纳(转)
网上有很多关于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使用简要归纳(转)的更多相关文章
- 史上最全的css hack(ie6-9,firefox,chrome,opera,safari) (zz)
在这个浏览器百花争鸣的时代,作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心,主要体现在javascript和css上面.javascript我这次就不谈了,先说说css. ...
- 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 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...
- IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表
浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表: ...
- CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chrome、Opera
CSS Hack大全-教你如何区分出IE6-IE10.FireFox.Chrome.Opera 转载自:http://www.jb51.net/article/50116.htm 现在的浏览器IE6- ...
- CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera
今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就 ...
- IC卡读卡器web开发,支持IE,Chrome,Firefox,Safari,Opera等主流浏览 器
IC卡读卡器在web端的应用越来越多,但是早期发布的ocx技术只支持IE浏览器,使用受到了很多的限制.IC卡读卡器云服务的推 出,彻底解决了以上的局限,使得IC卡读卡器不仅可以应用在IE浏览器上,还可 ...
- [转]JS根据useAgent来判断edge, ie, firefox, chrome, opera, safari 等浏览器的类型及版本
js根据浏览器的useAgent来判断浏览器的类型 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. JavaScript语法:navigator.use ...
- 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 ...
- 兼容IE6/IE7/IE8/FireFox的css hack
兼容IE6/IE7/IE8/FireFox的css hack .color{ background-color: #CC00FF; background-color: #FF00009; *backg ...
随机推荐
- CoreAnimation方法汇总
使用CoreAnimation一般分为三个部分:1.创建执行动画的CALayer 2.创建动画 3.CALayer 添加Animation CoreAnimation是以锚点为基础. CoreAnim ...
- Swift开发第七篇——字面量转换&下标
本篇分为两部分: 一.Swift 中的字面量转换 二.Swift 中的下标 一.Swift 中的字面量转换 所谓字面量就是指像特定的数字,字符串或者是布尔值这样能够直接了当地指出自己的类型并未变量进行 ...
- Web应用程序系统的多用户权限控制设计及实现-总结【11】
Web应用程序系统的多用户权限控制设计及实现通过10章内容讲述已经结尾了.写这些博客的目的很简单,方便自己以后参考,也留下自己编程岁月的一些痕迹.对于编程,对于工作,真是心甘情愿的就好. 由于这只是一 ...
- Android常用设计模式(二)
Android常用设计模式之观察者模式 观察者设计模式在Android应用中会经常用到,模式原理类似于这样的场景: 用户订报纸,然后在报社登记,报社来统计用户(添加用户),用户也可以取消订阅,报社删除 ...
- iOS & Mac JSON To Model
NSString * jsonPath=[[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"Cont ...
- win7+iis7.5+asp.net下 CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files 解决方案
http://www.cnblogs.com/finesite/archive/2011/01/28/1946940.html 给C:\Windows\temp 文件夹赋予完全控制权限,如图:
- yii2 GridView 下拉搜索实现案例教程
作者:白狼 出处:http://www.manks.top/article/yii2_gridview_dropdown_search本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章 ...
- js平滑返回顶部代码
随便找的一个,使用时直接调用gotoTop就行了,至于调速度之类的我没试,有兴趣的自己试试吧 注意:如果你想改变这个函数的名称千万不要忘了要同时改变第37行的那个gotoTop /** * JavaS ...
- SQLServer基本函数
1.字符串函数 长度与分析用 datalength(Char_expr) 返回字符串包含字符数,但不包含后面的空格 substring(expression,start,length) 取子串 ri ...
- python入门综合
#!/usr/bin/env python#-*-coding:utf-8-*- #以上是配置编写环境的开始 #第一行env表示运行当前环境变量内的python版本(2.x or 3.x)#第二行 ...