为不同的浏览器载入不同CSS的二种方法

dn001 2009-05-27 15:30:35

由于各浏览器(IE、gecko、opera......)对CSS的渲染方式都有所不同，造成显示效果不同，所以可通过对其载入不同CSS的方法来解决，下面介绍下二种方法来实现，不一定很实用，难的玩一把。

纯CSS方式

以下是引用片段：

Code


.box{ 
width:20em; 
height:20em; 
background:#369; 
} 
/*--gecko内核--*/ 
@mediaalland(min-width:0px){ 
box{ 
background:#CC0000; 
} 
} 
/*--operahacks--*/ 
/*--不能通过W3CCSS检验--*/

以上代码运行的结果，在IE中是灰色，Opera中是紫红，Firefox中是蓝色

在IE7以前版本还可采用CSS2的属性选择符来区别，不幸的是IE7开始已能识别。

本文章由forestgan于15-Oct-2006发表

javascript的方法

以下是引用片段：

varcss_browser_selector=function(){


var 
ua=navigator.userAgent.toLowerCase(), 
is=function(t){returnua.indexOf(t)!=-1;}, 
h=document.getElementsByTagName('html')[0], 
b=(!(/opera|webtv/i.test(ua))&&/msie(d)/.test(ua))?((is('mac')?'ieMac':'')+'ieie'+RegExp.$1) 
:is('gecko/')?'gecko':is('opera')?'opera':is('konqueror')?'konqueror':is('applewebkit/')?'webkitsafari':is('mozilla/')?'gecko':'', 
os=(is('x11')||is('linux'))?'linux':is('mac')?'mac':is('win')?'win':''; 
varc=b+os+'js'; 
h.className+=h.className?''+c:c;

}();

此脚本能区别更多的浏览器，具体使用方法可看脚本原作者网站。