CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍

CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozillafirefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!

目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题。在很多情况下,我们需要专门针对IE写css样式,即针对IE的css hack,下面将详细介绍这些内容:

1、常见的特殊符号的应用:

IE6:

_selector{property:value;}

selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important

IE7:

+selector{property:value;}

IE8:

selector{property:value\0;}

IE6 & IE7:

*selector{property:value;}

IE6 & IE7 & IE8:

selector{property:value\9;}

总结起来,如下:

其中,S表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式。

(了解更多Quirks模式、Strict(Standars)模式?)

hack 示例 IE6(S) IE6(Q) IE7(S) IE7(Q) IE8(S) IE8(Q)
* *color Yes Yes Yes Yes No Yes
+ +color Yes Yes Yes Yes No Yes
- -color Yes Yes No No No No
_ _color Yes Yes No Yes No Yes
# #color Yes Yes Yes Yes No Yes
\0 color\0 No No No No Yes No
\9 color\9 Yes Yes Yes Yes Yes Yes
!important color:blue !important;
color:green;
No No Yes No Yes No

2、条件注释语句(<!--[if IE]> <![endif]-->)

所有的IE可识别

仅IE6可识别

IE6以及IE6以上版本可识别

IE7以下版本可识别

lt 表示less than 当前条件版本以下的版本,不包含当前版本。

gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。

lte 表示less than or equal 当前版本以下版本,并包含当前版本。

3、meta声明

由于IE8 可能会将页面按照 IE7 模式进行渲染,针对 多版本IE的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。

 //标准 IE7 模式
 //兼容 IE7 模式
//标准 IE 模式

4、其他(/*\**/注释法)

网上也流传着这样一种ie hack方法

.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/

分析下:
各个浏览器都认识,这里给firefox用;
background-color:red\9;\9所有的ie浏览器可识别;
background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
:root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。

好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。

区别不同浏览器的CSS hack写法: 

区别IE6与FF: 
background:orange;*background:blue;

区别IE6与IE7: 
background:green !important;background:blue;

区别IE7与FF: 
background:orange; *background:green;

区别FF,IE7,IE6: 
background:orange;*background:green !important;*background:blue;

注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important, 
IE7能识别*,也能识别!important; 
FF不能识别*,但能识别!important;

  IE6 IE7 FF
* ×
!important ×

------------------------------------------------------ 
另外再补充一个,下划线"_", 
IE6支持下划线,IE7和firefox均不支持下划线。

  IE6 IE7 FF
* ×
!important ×
_ × ×

于是大家还可以这样来区分IE6,IE7,firefox 
: background:orange;*background:green;_background:blue;

注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。

时间: 2024-10-10 06:10:39

CSS hack是什么?IE6\7\8\9\10浏览器的CSS hack大全介绍的相关文章

Css Hack 大全(IE6、IE7、IE8、IE9 css hack)

一.IE6 css hack: 1. *html Selector {} /* Selector 表示 css选择器 下同 */ 2. Selector { _property: value; } /* property: value 表示 css 的属性名: 属性值 下同 */ 3. Selector { _property/**/: /**/value; } 4. Selector { -property: value; } /*IE6 css hack常用习惯推荐使用下划线_ */ 二.I

简单CSS hack:区分IE6、IE7、IE8、Firefox、Opera

一.跨浏览器的网页设计一直是让人很头疼的问题,这不只是因为浏览器的版本众多,还有一个重要的原因是相同浏览器的不同时期的版本也会有差异,甚至是在不同操作同台上还会有不同.因此使CSS hack技术进行浏览器区分是实现跨浏览器访问一个好方法.CSS Hack技术有很多,具体可以查看:    本文据说的主要是通过".",">","*","_"来区分.以下是本人对这四种符号的测试结果: -------IE6--     IE7-

转 CSS hack:针对IE6,IE7,firefox显示不同效果

CSS hack:针对IE6,IE7,firefox显示不同效果 做网站时经常会用到,衡量一个DIV+CSS架构师的水平时,这个也很重要. 区别不同浏览器的CSS hack写法: 区别IE6与FF:         background:orange;*background:blue; 区别IE6与IE7:         background:green !important;background:blue; 区别IE7与FF:         background:orange; *back

兼容IE6,IE7和firefox可以使用的一些css&#160;hack:

.一些问题是浏览器自身的问题,遇到问题发生无法避免的情况下,那就要考虑使用一些css hack了,以下是针对IE6,IE7和firefox可以使用的一些css hack:(1) a: 针对区别IE6 和IE7/firefox, 可以在要区别的代码后面跟上!important注意:ie6也认识!important:只要ie7/ie8/ff优先执行!important的属性.例:#test{    float:left;    (1)    (2)}最终显示:ie6下test是红色,而ie7/ie8

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

浏览器兼容问题一直是前段开发工程师比较头痛的问题,熟悉了里面的规则也就变得简单了,这里有一份资料可以分享给大家,大家平时开发过程中遵循这个规律的话,会变得轻松多了: 各浏览器CSS hack兼容表:   IE6 IE7 IE8 Firefox Chrome Safari !important   Y   Y     _ Y           * Y Y         *+   Y         \9 Y Y Y       \0     Y       nth-of-type(1)    

让IE6支持position:fixed的方法,CSS expression与JavaScript eval讲解

做吸顶效果或是固定效果时,使用position:fixed无非是最方便的,可是万恶的IE6是没有fixed这个属性值的,而我们要使IE6能够像fixed一样固定在浏览器中的某个位置,使用onscroll改变top值是一个方法,但如果滚轮滚的快,会出现卡闪烁情况.而如高级浏览器如果也这样用,那显然有失大雅,除非JS中判断浏览器版本.但是在这里笔者要讲解的是使用CSS完成fixed效果. 千言万语不及实例一个: 以上是笔者在IETester下测试IE6的fixed,注意看滚动条.其中导航采用的是po

css hack 大全 各个浏览器的css

各个浏览器的css hack区别属性: IE6: _zoom:1; IE6/7: *zoom:1; IE6/7/8/9 :\9 各个浏览器的css hack区别规则 IE6: *html{} IE7: +.class{} 非IE6: html>body {} 仅火狐:@-moz-document url-prefix(){} saf3+和谷歌:@media all and (-webkit-min-device-pixel-ratio:0){} 仅opera:@media all and (-w

针对IE6,IE7,IE8,IE9,FF等不同浏览器的CSS写法

首先我们介绍一下HACK原理,就是不同浏览器对字符的识别不同 在 CSS中常用特殊字符识别表: (1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的; (2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ; (3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_; (4)\9:所有IE浏览器都识别(IE6.IE7.IE8.IE9) 示例: (1)区别FF(IE8)与IE6 IE7 back

CSS对各个浏览器兼容技巧---HACK技巧

*   ie6和ie7都可以识别_   只有ie6可以识别\0  只有ie8可以识别:root 只有ie9可以识别 关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK HACK概念: 不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所