Firefox 浏览器

@-moz-document url-prefix() {

.selector {

property: value;

}

}

支持所有Gecko内核的浏览器 (包括Firefox)

*>.selector { property: value; }

Webkit 内核浏览器 

@media screen and (-webkit-min-device-pixel-ratio: 0) {

Selector {

property: value;

}

}

Opera 浏览器

html:first-child>b\ody Selector {property:value;}

IE 浏览器针对不同的版本有不同个Hack方式。

CSS Hack大致有3种表现形式,CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack,CSS Hack主要针对类内部Hack:比如 IE6能识别下划线"_"和星号" * ",IE7能识别星号" * ",但不能识别下划线"_",而firefox两个都不能认识。等等

选择器Hack:比如 IE6能识别*html .class{},IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

方式一:HTML头部引用(if IE)Hack:针对所有IE:<!--[if IE]><!--您的代码--><![endif]-->,针对IE6及以下版本:<!--[if lt IE 7]><!--您的代码--><![endif]-->,这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

1. <!--[if !IE]> 除IE外都可识别 <!--<![endif]-->

2. <!--[if IE]> 所有的IE可识别 <![endif]-->

3. <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]-->

4. <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]-->

5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以识别 <![endif]-->

6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别<![endif]-->

(2)方式二 类内属性前缀法

    说明:在标准模式中
  • “-″减号是IE6专有的hack
  • “\9″ IE6/IE7/IE8/IE9/IE10都生效
  • “\0″ IE8/IE9/IE10都生效,是IE8/9/10的hack
  • “\9\0″ 只对IE9/IE10生效,是IE9/10的hack

(3)CSS hack方式三:选择器前缀法

*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效等等
 

IE 9   

:root Selector {property: value\9;}

IE 9-

Selector {property: value\9;}

IE 8    

Selector {property: value/;}

或:

@media \0screen {

Selector {property: value;}

}

IE 8  +

Selector {property: value\0;}

IE 7

+html Selector{property:value;}

或:

*:first-child+html Selector {property:value;}

IE 7-

Selector {*property: value;}

IE 6

Selector {

_property: value;

}

或者:

*html Selector {

property: value;

}

例如:

div{
 background:green;/*forfirefox*/
 *background:red;/*forIE6*/(bothIE6&&IE7)
}
比如要分辨IE6和firefox两种浏览器,可以这样写:
 
我在IE6中看到是红色的,在firefox中看到是绿色的。
解释一下:
上面的css在firefox中,它是认识不了后面的那个带星号的东西是什么的,于是将它过滤掉,不予理睬,解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
在IE6中呢,它两个background都能识别出来,它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别,处在后面的red的优先级高,于是当然这个div的背景颜色就是红色的了。
CSS hack:区分IE6,IE7,firefox
 
区别FF,IE7,IE6:
background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*;不能识别 !important;
IE7能识别*,能识别!important;
FF不能识别*,但能识别!important;
浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6
以: " #demo {width:100px;} "为例;
#demo {width:100px;} /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;} /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;} /*会被IE7执行*/
所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;
IE8 最新css hack:
"\9" 例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.(只针对IE9 Hack)
"\0" IE8识别,IE6、IE7不能.
"*" IE6、IE7可以识别.IE8、FireFox不能.
"_" IE6可以识别"_",IE7、IE8、FireFox不能.
 
 

处理浏览器兼容 各个浏览器的标识 hack的更多相关文章

  1. web前端 关于浏览器兼容的一些知识和问题解决

    浏览器兼容 为什么产生浏览器兼容,浏览器兼容问题什么是浏览器兼容: 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况. 浏览器兼容产生的原因: 因为不 ...

  2. 浅谈CSS hack(浏览器兼容)

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  3. CSS兼容各浏览器的hack

    CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...

  4. 关于浏览器兼容问题及hack写法

    浏览器的兼容问题 1.浏览器内核: Mozilla Firefox ( Gecko ) Internet Explorer ( Trident ) Opera ( Presto ) Safari ( ...

  5. 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解

    什么是浏览器兼容问题?所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们 ...

  6. 解决各大浏览器兼容问题hack

    解决各大浏览器兼容问题hack,IE6/ IE7/ IE8/ IE9/ Firefox/ Opera/ Webkit/ Chrome/ Safari. 浏览器兼容是网站前端页面制作最基本的问题,通常I ...

  7. CSS Hack (各个浏览器兼容的问题)

    写css样式的时候,恐怕最头疼的就是各个浏览器下的兼容性问题,即css hack,明明感觉应该是对的,但是就是出不来效果,我根据平时所接触的,总结一下关于兼容 性的技巧,希望可以对大家有所帮助…… C ...

  8. CSS hack浏览器兼容一览表

    CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧.这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助.

  9. 怎么用css hack处理各浏览器兼容IE6,IE7,IE8,IE9/ FF

    第一:什么事浏览器兼容性 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题.在网站的设计和制作中,做好浏览器兼容,才能够让网站 ...

随机推荐

  1. Fast Walsh-Hadamard Transform——快速沃尔什变换

    模板题: 给定$n = 2^k$和两个序列$A_{0..n-1}$, $B_{0..n-1}$,求 $$C_i = \sum_{j \oplus k = i} A_j B_k$$ 其中$\oplus$ ...

  2. javaWeb学习总结(1)- JavaWeb开发入门

    一.基本概念 1.1.WEB开发的相关知识 WEB,在英语中web即表示网页的意思,它用于表示Internet主机上供外界访问的资源. Internet上供外界访问的Web资源分为: 静态web资源( ...

  3. 028hibernate缓存(性能优化策略)

    一级缓存 二级缓存 查询缓存 缓存是为了提高性能 变化不是很大,相对静态的对象放入缓存 对象的创建比较耗时

  4. .Net Core应用搭建的分布式邮件系统设计

    本篇分享的是由NetCore搭建的分布式邮件系统,主要采用NetCore的Api和控制台应用程序,由于此系统属于公司的所以这里只能分享设计图和一些单纯不设计业务的类或方法: 为什么要在公司中首例采用N ...

  5. [原创]LAMP+phpmyadmin+FTP环境搭建

    ***简单ftp服务器搭建: rpm –qa|grep vsftpd   //检查是否安装服务 yum –y install vsftpd-*   //安装服务 mkdir /var/ftp/uplo ...

  6. angular实现的文字上下无缝滚动

    最近在学习angularJs,业余时间随便写了一个文字上下无缝滚动的例子,主要写了一个小小的指令. css代码:主要控制样式 <style type="text/css"&g ...

  7. Python教程(2.3)——运算符和类型转换

    Python里有很多运算符(operator),这节就让我们来详细学一学. 注意:本文没有特别说明的地方,只考虑bool.int.float三种类型.例如"两边操作数类型相同时,得到的结果为 ...

  8. Python爬虫Dota排行榜爬取

    1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的 ...

  9. 移动端页面开发适配 rem布局原理

    主题 HTML移动端页面开发适配 rem布局原理 什么是适配,为什么要适配 我们拿到的设计图一般是以640,750,1080分辨率为基准设计的,而现在的手机终端各式各样,分辨率不同,逻辑像素不同 ,适 ...

  10. android 模拟器对应键盘快捷键

    一位同事的总结资料: Android SDK2.0.1自带的虚拟机尺寸都比较小(不针对机型,只为了在PC上看的舒服一点,当然越大越好了,我最大设置成1050*450,但是自带的屏保会不够宽,900*4 ...