背景IE6、IE7、IE8、Firefox兼容性CSSHACK代码示例

IE6、 IE7、 IE8、 Firefox兼容性CSS HACK

1.区别IE和非IE浏览器CSS HACK代码

#divcss5{background:blue; /*非IE背景藍色*/background:red \9; /*IE6、 IE7、 IE8背景紅色

*/

}

2.区别IE6,IE7,IE8,FFCSS HACK

【区别符号】 「\9」、 「*」、 「_」

【示例】

#divcss5{background:blue; /*Firefox背景变蓝

色*/background:red\9; /*IE8背景变红色*/

*background:black; /*IE7背景变黑色*/

_background:orange; /*IE6背景变橘

色*/

}

【说明】 因为IE系列浏览器可读「\9」 而IE6和IE7可读「*」 (米字号)另外IE6可辨识「_」 (底线) 因此可以依照顺序写下来就会让浏览器正确的读取到自己看得懂得CSS语法所以就可以有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。

3.区别IE6、 IE7、 Firefox(EXP 1)

【区别符号】 「*」、 「_」

【示例】

#divcss5{backgrou nd:blue; /*Firefox背景变蓝色

*/

*background:black; /*IE7背景变黑色*/

_background:orange; /*IE6背景变橘

色*/

}

【说明】 IE7和IE6可读「*」 (米字号) IE6又可以读「_」 (底线)但是IE7却无法读取「_」 至于Firefox(非IE浏览器)则完全无法辨识「*」和「_」 因此就可以透过这样的差异性来区分IE6、 IE7、 Firefox

4.区别IE6、 IE7、 Firefox(EXP 2)

【区别符号】 「*」、 「! important」

【示例】

#divcss5{background:blue; /*Firefox背景变蓝色*/

*background:green! important; /*IE7背景变绿色*/

*background:orange; /*IE6背景变橘色*/

}

【说明】 IE7可以辨识「*」和「! important」 但是IE6只可以辨识「*」 却无法辨识「! important」 至于Firefox可以读取「! important」但不能辨识「*」因此可以透过这样的差异来有效区隔IE6、 IE7、 Firefox。

5.区别IE7、 Firefox

【区别符号】 「*」 、 「! important」

【示例】

#divcss5{background:blue; /*Firefox背景变蓝色*/

*background:green! important; /*IE7背景变绿色

*/

}

【说明】  因为Firefox可以辨识「! important」但却无法辨识「*」 而IE7则可以同时看懂

「*」 、 「! important」  因此可以两个辨识符号来区隔IE7和Firefox。

6.区别IE6、 IE7(EXP 1)

【区别符号】 「*」、 「_」

【示例】 

#tip{

*background:black; /*IE7背景变黑色*/

_background:orange; /*IE6背景变橘色

*/

}

【说明】 IE7和IE6都可以辨识「*」 (米字号)但IE6可以辨识「_」 (底线) IE7却无法辨识透过IE7无法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差异。

7.区别IE6、 IE7(EXP 2)

【区别符号】 「! important」

【示例】

#divcss5{background:black! important; /*IE7背景变黑色*/background:orange;/*IE6背景变橘色*/

}

【说明】 因为IE7可读取「! important;」但IE6却不行而CSS的读取步骤是从上到下因此IE6读取时因无法辨识「! important」而直接跳到下一行读取CSS所以背景色会呈现橘色。

8.区别IE6、 Firefox

【区别符号】 「_」

【示例】 

#divcss5{background:black; /*Firefox背景变黑

色*/

_background:orange; /*IE6背景变橘色

*/

}

【说明】因为IE6可以辨识「_」 (底线)但是Firefox却不行因此可以透过这样的差异来区隔Firefox和IE6有效达成CSS hack。

截字省略号select { -o-text-overflow:el l ipsis; text-overflow:el l ipsis; white-space:nowrap;overflow:h idden; }

这个是在越出长度后会自行的截掉多出部分的文字并以省略号结尾很好的一个技术。只是目前Firefox并不支持。

1.Div居中问题 div设置margin-left,margin-right为auto时已经居中 IE不行 IE需要设定body居中首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。

2.链接(a标签)的边框与背景 a链接加边框和背景色需设置dis p lay: b lo c k, 同时设置float: left保证不换行。

3.超链接访问过后hover样式就不出现的问题被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变C S S属性的排列顺序: L-V-H-ACode:<style type="te xt/cs s"><!--a:link {}a:vis ited{}a:hover {} a:active {} --></style>

4.游标手指cursor cursor:pointer可以同时在IE FF中显示游标手指状 hand仅IE可以

5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义ul{margin:0;p adding:0;}就能解决大部分问题

6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的c ss中一般首先都使用这样的样式ul,form{margin:0;p adding:0;}给定义死了,所以后面就不会为这个头疼了.

7.BOX模型解释不一致问题 在FF和IE中的BOX模型解释不一致导致相差2px解决方法div{margin:30px!important;margin:28px;}注意这两个margin的顺序一定不能写反 important这个属性IE不能识别但别的浏览器可以识别。所以在IE下其实解释成这样 div{maring:30px;margin:28px}重复定义的话按照最后一个来执行 所以不可以只写margin:xx px!important; #box{width:600px; //for ie6.0-w\idth:500px; //for ff+ie6.0}#box{width:600px!important //for ff width:600p x; //for ff+ie6.0 width/**/:500px; //for ie6.0-}

8.最狠的手段- !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE 则会忽略.如下 .tabd 1{background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/background:url(/res/images/up/tab 1.gif)no-repeat 1px 0px; /*Style for IE*/} 值得注意的是一定要将xxxx!important这句放置在另一句之上上面已经提过

9.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS为什么IE这样让人头疼然后一边写css一边咒骂那个可恶的IE.其实对于css的标准支持方面IE并没有我们想象的那么可恶关键在于IE和FF的默认值不一样而已掌握了这个技巧你会发现写出兼容FF和IE的css并不是那么困难或许对于简单的css你完全可以不用”!important”这个东西了。 我们都知道浏览器在显示网页的时候都会根据网页的css样式表来决定如何显示但是我们在样式表中未必会将所有的元素都进行了具体的描述 当然也没有必要那么做所以对于那些没有描述的属性浏览器将采用内置默认的方式来进行显示譬如文字如果你没有在css中指定颜色那么浏览器将采用黑色或者系统颜色来显示 div或者其他元素的背景如果在css中没有被指定浏览器则将其设置为白色或者透明等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样而这个默认样式该如何显示我知道在w3c中有没有对应的标准来进行规定 因此对于这点也就别去怪罪IE了。

10.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢办法就是去掉he ight设置min-he ight:200px; 这里为了照顾不认识 min-height 的 IE6 可以这样定义:{height:auto!important;heig ht:200px;min-he ight:200px; }

11.firefox下如何使连续长字段自动换行众所周知IE中直接使用word-wrap:break-word就可以了, FF 中我们使用JS插入&#10;的方法来解决 <style type="text/c ss"> <!-- div

{ width:300px; word-wrap:break-word; border:1px solid red; } --></style> <div id="ff">aaaaaaaaaaaaaaaaaaaaaaa</div> <s crīpt type="text/javas crīpt"> /*

<![CDATA[ */ function toBreakWord(el, intLen){ varōbj=do cument.getElementById(el); var strContent=obj.innerHTML; var strTemp="";w hile(s trContent.lengt h>intLen){ s trTemp+=strContent.s ubs tr(0,intLen)+"&#10;";s trContent=s trContent.s ubs tr(intLen,s trContent.length); }s trTemp+="&#10;"+s trContent; obj.innerHTM L=s trTemp; } if(doc ument.getEle ment ByI d&& !document.all) toBreakWord("ff", 37); /*]]>*/</scrīpt>

1,FF下给div设置padding后会导致w idth和height增加,但IE不会.(可用!important解决)2,居中问题.

1).垂直居中.将line-h eight设置为当前div相同的高度,再通过vetic al-align:middle.(注意内容不要换行.)

2).水平居中.margin:0 auto;(当然不是万能)

3,若需给a标签内内容加上样式,需要设置dis p lay:b lo c k;(常见于导航标签)

4, FF和IE对BOX理解的差异导致相差2px的还有设为float的div在ie下margin加倍等问题.

5,ul标签在FF下面默认有lis t-s tyle和padding.最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)

6,作为外部wrapper的div不要定死高度,最好还加上overflow: hidd en.以达到高度自适应.

7,关于手形光标.curs or:pointer.而hand只适用于IE.贴上代码:

兼容代码:兼容最推荐的模式。

/*FF*/

.s ub m itb utto n{float:left;width:40p x;height: 57px;margin-top:24px;margin-right: 12px;

}

/* IE6*/

*html .submitbutto n{margin-top:21px;

}

/*IE7*/

*+htm l .s ub mitbutton{margin-top:21px;

}

什么是浏览器兼容当我们使用不同的浏览器Firefox IE7 IE6访问同一个网站或者页面的时候会出现一些不兼容的问题有的显示出来正常有的显示出来不正常我们在编写CSS的时候会很恼火刚修复了这个浏览器的问题结果另外一个浏览器却出了新问题。而兼容就是一种办法能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵

最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担虽然IE7已经走向标准化但还是有许多和FF不同的地方所以需要用到IE7的兼容有许多朋友问过IE7的兼容是什么 其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章 《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。

有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用下面介绍三个兼容例如 适合新手呵呵高手就在这里路过吧。 

程序代码

第一个兼容 IE FF所有浏览器公用其实也不算是兼容height:100px;

第二个兼容IE6专用

_height:100px;

第三个兼容IE6 IE7公用

*height:100px;

介绍完了这三个兼容了下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容看下面的代码顺序不能错哦

程序代码height:100px;

*height:120px;

_height:150px;

下面我简单解释一下各浏览器怎样理解这三个属性

在FF下第2、 3个属性FF不认识所以它读的是height:100px;

在IE7下第三个属性IE7不认识所以它读第1、 2个属性又因为第二个属性覆盖了第一个属性所以IE7最终读出的是第2个属性*height:120px;

在IE6下三个属性IE6都认识所以三个属性都可以读取又因为第三个属性覆盖掉前2个属性所以IE6最终读取的是第三个属性。