根据不同的浏览器载入不同的CSS（转）
Saturday, January 31, 2009
相信大家在制作模板时,最~最头痛的就是IE跟Firefox的兼容性问题!现在可以很好地解决这个问题!
详细讲解实现方法
1.styles.css (所有浏览器都调用的css共公文件)
例如: #menu { }的定义在IE ,Firefox,Opera显示不一致,那么你不要将#menu { }放入styles.css中.而是放入下面的css文件中.
2.ie.css ( 只有IE才调用的CSS文件.将#menu { }放入这,就可在IE中独立定义)
3.Firefox.css(只有Firefox才调用的CSS文件.将#menu { }放入这,就可在Firefox中独立定义)
4.Opera.css(只有Opera才调用的CSS文件.将#menu { }放入这,就可在Opera中独立定义)
5.x.css(其它不知名浏览器,建议调入Firefox的定义就行)
注意:这5个CSS文件,放在风格文件的根目录.
请不要使用记事本编辑本文件!!推荐使用EditPlus编辑!保存时选择UTF-8编码!
用法：放在<head></head>中即可。
下面是实现这功能的JS代码
<SCRIPT language=JavaScript>
<!--
//根据不同的浏览器调用不同的CSS!
if (window.navigator.userAgent.indexOf("MSIE")>=1)
{
document.write('<link media="screen" href="template/{$template['dirname']}/ie.css" type="text/css" rel="stylesheet" />');
}
else{
if (window.navigator.userAgent.indexOf("Firefox")>=1)
{
document.write('<link media="screen" href="template/{$template['dirname']}/Firefox.css" type="text/css" rel="stylesheet" />');
}
else{
if (navigator.appName=="Opera")
{
document.write('<link media="screen" href="template/{$template['dirname']}/Opera.css" type="text/css" rel="stylesheet" />');
}
else{
document.write('<link media="screen" href="template/{$template['dirname']}/x.css" type="text/css" rel="stylesheet" />');
}
}
}
//-->
</SCRIPT>
Labels: css, javascript
