IE6,IE7,IE8,Firefox 兼容的css hack

starleejay 2015-06-26

如果你问一个前端工程师世界上最痛苦的事情是什么,十有八九都会回答浏览器差异。由于IE6的异常表现加上国内盗版XP系统的横行再加上XP默认绑定IE6人们一般不会去升级浏览器,导致浏览器的差异始终是前端工程师头疼的事情。

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

这里主要讨论IE6、IE7、IE8和FireFox的差异。

先介绍三个符号:“ ”、“ !important ” 和“ ”。

!important可被FireFox和IE7识别,* 可被IE6、IE7识别,IE8和FF不能识别,_ 可被IE6识别,IE7、IE8、FF不能识别,'\9'能被ie识别(ie6、ie7、ie8),'\0' 能被IE8、ie9识别,IE6、IE7不能,'\9\0' 只能被ie9识别。

书写顺序,一般是将识别能力强的浏览器的CSS写在后面。

如要区别IE6、IE7、FF浏览器只需要这样写:

background:orange; *background:green; _background:blue;

书写的顺序是firefox的写在前面,IE7的写在中间,IE6的写在最后面。这样FF下的背景色是橙色,IE7下的背景色是绿色,IE6下的背景色是蓝色。这只是其中一种Hack写法,只要记住这三个符号,基本可以解决所有问题。

兼容IE6/IE7/IE8/FF的写法,注意下面的顺序不可颠倒:

border:2px solid #00f;     //蓝色

border:2px solid #0f0\9;   //绿色

border:2px solid #f90\0;    //橙色

_border:2px solid #f00;    //红色

FF下蓝边,IE6下红边,IE7下绿边,IE8下橙边。

IE专用的条件注释

IE6,IE7,IE8,Firefox 兼容的css hack
 

(lte:就是Less than or equal to的简写,也就是小于或等于的意思。lt :就是Less than的简写,也就是小于的意思。gte:就是Greater than or equal to的简写,也就是大于或等于的意思。gt :就是Greater than的简写,也就是大于的意思。! :就是不等于的意思,跟javascript里的不等于判断符相同)

例如下面

IE6,IE7,IE8,Firefox 兼容的css hack

相关推荐

aSuncat / 0评论 2020-08-18