CSS hack for IE6/IE7/IE8/Firefox/Chrome/Safari

跟風遠走 提交于 2019-12-02 23:03:29
每次调css最令人头痛的就是浏览器校正问题,因为每个浏览器对css的解释都不太一样,firefox本身算是比较照规矩来,处理上比较简单,但是遇到微软的ie系列头   就大了,虽然都是ie,但是ie6、ie7、ie8各版本对css的解释又不一样,就算你本身已经在ie6调整好,但是在ie7看起来又是不一样,这时我们就得来对   各个浏览器设定不同的数值来解决版面移位的问题。 

网路上有非常多关于css hack的教学文章,当然处理方法也有很多种,接下来要跟大家说明的是属于比较简单的方法,但是以下的校正确无法通过w3c检测,虽然无法通过检测,但是针对   各个浏览器校正确是有效的! 

目前浏览器大宗还是属于ie6的天下,这原因主要是因为xp本身内建ie6,而且很多使用者很喜欢重灌xp,因此ie6仍占走了大半的浏览器天下,不过随着windows7的出现,   倒是有非常大的机会解决过气的ie6,因为windows7本身是内建ie8,微软的ie8对css的解释已经越来越标准,当然标准程度仍是不及firefox。 

另外,如果要处理ie各版本浏览器的相容性问题,那一定要有各版本的ie浏览器可以浏览,但是微软作业系统内并没有让多版本的ie共存,为了让自己电脑内存在多种 版本的ie浏览器,那就赶快下载ietester来使用吧! 另外,也别忘记下载firefox来修正网页css.

区别ie和firefox 

【辨识符号】:「\9」 

【范例练习】: 
#tip { 

background:blue; /*firefox 背景变蓝色*/ 

background:red \9; /*ie6、ie7、ie8背景变红色*/ 



【说明】:因为ie浏览器看得懂「\9」,但是非ie的浏览器一律看不懂,因此就可以用这个语法来区分ie和firefox(非ie浏览器,像是opera、google chrome 、safari等),因此以上css范例中,非ie浏览器是显示蓝色背景,ie系列浏览器是显示红色背景。 

——————————–我是分隔线——————————– 
区别ie6、ie7、ie8、firefox 

【辨识符号】:「\9」、「*」、「_」 

【范例练习】: 

#tip { 

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等)。 

——————————–我是分隔线——————————– 
区别ie6、ie7、firefox (方法 1) 

【辨识符号】:「*」、「_」 

【范例练习】: 

#tip { 

background:blue; /*firefox背景变蓝色*/ 

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

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



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

——————————–我是分隔线——————————– 
区别ie6、ie7、firefox (方法 2) 

【辨识符号】:「*」、「!important」 

【范例练习】: 

#tip { 

background:blue; /*firefox 背景变蓝色*/ 

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

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



【说明】:ie7可以辨识「*」和「!important」,但是ie6只可以辨识「*」,却无法辨识「!important」,至于firefox可以读取「!important」但不能辨识「*」因此可以 透过这样的差异来有效区隔ie6、ie7、firefox。 
区别ie7、firefox 

【辨识符号】:「*」、「!important」 

【范例练习】: 

#tip { 

background:blue; /*firefox 背景变蓝色*/ 

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



【说明】:因为firefox可以辨识「!important」但却无法辨识「*」,而ie7则可以同时看懂「*」、「!important」,因此可以两个辨识符号来区隔ie7和firefox。 

——————————–我是分隔线——————————– 
区别ie6、ie7 (方法 1) 

【辨识符号】:「*」、「_」 

【范例练习】: 

#tip { 
*background:black; /*ie7 背景变黑色*/ 

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



【说明】:ie7和ie6都可以辨识「*」(米字号),但ie6可以辨识「_」(底线),ie7却无法辨识,透过ie7无法读取「_」的特性就能轻松区隔ie6 和ie7之间的差异。 
区别ie6、ie7 (方法 2) 

【辨识符号】:「!important」 

【范例练习】: 

#tip { 

background:black !important; /*ie7 背景变黑色*/ 

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



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

——————————–我是分隔线——————————– 
区别ie6、firefox 

【辨识符号】:「_」 

【范例练习】: 

#tip { 

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

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



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

——————————–我是分隔线——————————– 

关于ie6、ie7、ie8、firefox之间的css hack大概是以上那样,如果有疏漏或是有错误还烦请大家指证一下啰! 这些css hack是我目前看过比较简单的处理方式,当然如果你不会很在意css是否通过w3c的验证,你只会在意每个用户在不同的浏览器下阅读是否可以正常的话,其实以上css hack 对你来说是非常好用的,因为这些css hack如果善加利用确实可以正确的解决浏览器相容性问题。 

以上的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) Y Y

代码示例:

#test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
*+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}

body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

整体测试代码示例:

.test{
color:#000000;
color:#0000FF\0;
[color:#00FF00;
*color:#FFFF00;
_color:#FF0000;
}

其他说明:

1、如果你的页面对IE7兼容没有问题,又不想大量修改现有代码,同时又能在IE8中正常使用,微软声称,开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题,此代码如下:
<meta http-equiv=”x-ua-compatible” content=”ie=7″ />

2、body:nth-of-type(1) 如果这样写,表示全局查找body,将会对应第一个<body>。

3、还有其他写法,比如:
*html #test{}或者 *+html #test{}

4、*+html 对IE7的hack 必须保证HTML顶部有如下声明:

http://www.w3.org/TR/html4/loose.dtd

5、顺序:Firefox、IE8、IE7、IE6依次排列。

小知识:什么是CSS hack?

  由于不同的浏览器,比如IE6、IE7、IE8、Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。

  这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!