程序员人生 网站导航

可区别IE6、IE7、IE8和firefox的CSS hack

栏目:网络优化时间:2014-06-09 09:24:06
我从来没有使用过CSS hack,以前以为会很麻烦,但是今天学习后,发现是非常简单的。我真佩服我自己,不用写CSS hack都能使我的网站在各个浏览器下兼容,但是有些问题不使用CSS hack真的会很麻烦。

Gonten今天收集了很多的CSS兼容性文章,整理出了可以区别IE6、IE7、IE8和firefox的CSS hack,使用方法都很简单,看看下面的区分方法吧!

首先,先看看基本的CSS hack技巧:

IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
IE6支持下划线,IE7和firefox均不支持下划线。
IE6及IE6以下识别* html {…},仅IE7识别*+html {…}
仅IE支持在属性值后加上“9”。

通过以上的说明,我们可以这样来区别各个浏览器:

区别IE6可以加上下划线“_”,如: _margin-top:10px

区别IE7可以加上*+html,如: *+html .box{….}

区别FF可以这样写:

background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/

区别IE6、IE7、IE8、FF,可以这样写:

background-color: #CC00FF; /*所有浏览器都会显示为紫色*/
background-color: #FF00009; /*IE6、IE7、IE8会显示红色*/
*background-color: #0066FF; /*IE6、IE7会变为蓝色*/
_background-color: #009933; /*IE6会变为绿色*/

通过以上这几个技巧应该可以解决很多浏览器兼容性问题了,注意CSS是遵循“后来者居上”的,也就是后面的CSS会覆盖前面相同的CSS,所以在写CSS hack的时候要注意顺序。

本文来自: www.Gonten.com
------分隔线----------------------------
------分隔线----------------------------

最新技术推荐