您的位置：首页 > Web前端 > CSS

自动判断浏览器类型并读取相应CSS的代码

2008-06-03 10:35 543 查看

实际工作中，经常会遇到浏览器版本不同网页代码就乱七八糟的情况，虽然可以在同一个CSS文件里面做到兼容，但是对于新手来说毕竟不太方便，又花费时间。比较懒的一个解决办法就是通过JS判断浏览器的类型，并读取相应的CSS文件，这样便基本上实现了网页代码兼容多浏览器。在网上找了一些这方面的代码，整合了一下，发出来，供大家方便使用，有出错的或者不会用的可以与我联系。

HTML代码：

程序代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>白天的影子-www.i1981.com</title>
<link href="/css/common.css" _fcksavedurl=""/css/common.css"" rel="stylesheet" type="text/css" />
<link href="/css/index_ie7.css" rel="stylesheet" type="text/css" />
<link href="/css/footer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/navigator.js"></script>
</head>

<body>
<div>自动判断浏览器类型并调用相应CSS的代码</div>
</body>
</html>

navigator.js

程序代码
// JavaScript Document
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE7.0")
{
//alert("IE 7.0");
setActiveStyleSheet("index_ie7.css");
}
else if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE6.0")
{
//alert("IE 6.0");
setActiveStyleSheet("index_ie6.css");
}else if(window.navigator.userAgent.indexOf("Firefox")>=1) {
//alert("FF");
setActiveStyleSheet("index_ff.css");
}
function setActiveStyleSheet(title){
document.getElementsByTagName("link")[1].href="/css/"+title; //这里根据自己的实际情况修改("link")[1]部分为0或1或2或其他，还有，注意这里/css/部分，如果css文件放在images目录下，请改为/images/或../images/
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航