由於各浏覽器(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;
}();