如果你问一个前端工程师世界上最痛苦的事情是什么,十有八九都会回答浏览器差异。由于IE6的异常表现加上国内盗版XP系统的横行再加上XP默认绑定IE6人们一般不会去升级浏览器,导致浏览器的差异始终是前端工程师头疼的事情。
CSS hack由于不同的浏览器, 比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏 览器写不同的CSS code的过程,就叫CSS hack!
先介绍三个符号:“ * ”、“ !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专用的条件注释
(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代码+示例
CSS HACK 兼容列表 Firefox,IE5,IE5.5,IE6,IE7,IE8 CSS 浏览器兼容
针对firefox ie6 ie7 ie8的css样式hack
IE6、IE7、IE8、Firefox、Chrome、Safari的CSS hack兼容一览表
css hack ie6 ie7 ie8 firefox等浏览器兼容性
CSS Hack兼容大全,令网页能正常显示在IE5,IE5.5,IE6,IE7,Firefox,Opera,Safari等浏览器上
NULL 博文链接:https://helloklzs.iteye.com/blog/1305459
CSS在IE6, IE7, IE8, Firefox中的特定使用(Hack).
CSS完美兼容IE6/IE7/FF的通用方法 一、CSS HACK 以下两种方法几乎能解决现今所有HACK.
2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】:「\9」、「*」、「_」【示例】: 复制代码代码如下:#divcss5{background:blue; /*Firefox 背景变蓝色*/background:red \9; /*IE8 背景变红色*/*background:black; /*IE...
css规范_IE bug,IE与Firefox的CSS兼容问题.....整理
css hack 兼容性的总结与体会. IE6,IE7,IE8,IE9,firefox,apple,chrome等等浏览器的兼容性
第一排给Firefox以及其他浏览器看 第二排给IE7(可能以后的IE8、IE9也是如此,谁知道呢)看 第三排给IE6以及更老的版本看 最好的应用就是可以让IE6也“支持”position:fixed,而且,配合这个原理,可以做到不引入...
能让用户量最多的两个浏览器兼容,是web程序员比较头疼的事情,里面包含了一些方法总结,比如CSS里面的hack,js里面的style.height等赋值都要有'px'才兼容火狐
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同...
IE6,IE7,IE8i,firefox 不兼容的问题。
IE6,IE7,IE8,Firefox,Chrome,Safari的CSS_hack兼容表