根据客户端浏览器，加载不同的CSS文件

来源：互联网发布：古力娜扎最新照片知乎编辑：程序博客网时间：2024/05/14 11:00

大家经常看到这样的一个网页，用Firefox浏览器打开的时候，网页的HTML代码中是这样的：

[html] view plaincopy
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="FF">  

用Google Chrome浏览器打开的时候，会变成

[html] view plaincopy
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="Chrome">  

如果，你使用IE浏览器或者IE内核的浏览器，class则变更：class="IE"。

判断浏览器类型，可以通过服务器端程序做判断，也可以通过客户端脚本做判断。

下面服务器端的判断方法是：

[html] view plaincopy
<!DOCTYPE html>  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class="<%= this.BrowserClass %>">  
<head runat="server">  

[csharp] view plaincopy
public string BrowserClass  
{  
    get  
    {  
        return GetBrowser(HttpContext.Current.Request.Browser);  
    }  
}  

[csharp] view plaincopy
/// <summary>  
/// 获得浏览器类型字符  
/// </summary>  
private string GetBrowser(HttpBrowserCapabilities browser)  
{  
    if (browser == null)  
    {  
        return "IE";  
    }  
    if (browser.Browser.IndexOf("Firefox", StringComparison.CurrentCultureIgnoreCase) != -1)  
    {  
        return "FF";  
    }  
    else if (browser.Browser.IndexOf("Safari", StringComparison.CurrentCultureIgnoreCase) != -1)  
    {  
        return "SF";  
    }  
    else if (browser.Browser.IndexOf("Opera", StringComparison.CurrentCultureIgnoreCase) != -1)  
    {  
        return "OE";  
    }  
    else if (browser.Browser.IndexOf("Chrome", StringComparison.CurrentCultureIgnoreCase) != -1)  
    {  
        return "Chrome";  
    }  
    else  
    {  
        return "IE";  
    }  
}  

下面是客户端判断浏览器类型：

[javascript] view plaincopy
<script type="text/javascript">  
    function myBrowser() {  
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串    
        var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器    
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器    
        var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器    
        var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") < 1; //判断是否Safari浏览器    
        var isChrome = userAgent.indexOf("Chrome") > -1; //判断是否Chrome浏览器    
        if (isIE) {  
            var IE5 = IE55 = IE6 = IE7 = IE8 = false;  
            var reIE = new RegExp("MSIE (//d+//.//d+);");  
            reIE.test(userAgent);  
            var fIEVersion = parseFloat(RegExp["$1"]);  
            IE55 = fIEVersion == 5.5;  
            IE6 = fIEVersion == 6.0;  
            IE7 = fIEVersion == 7.0;  
            IE8 = fIEVersion == 8.0;  
            if (IE55) { return "IE55"; }  
            if (IE6) { return "IE6"; }  
            if (IE7) { return "IE7"; }  
            if (IE8) { return "IE8"; }  
        }  
        if (isFF) { return "FF"; }  
        if (isOpera) { return "Opera"; }  
        if (isSafari) { return "Safari"; }  
        if (isChrome) { return "Chrome"; }  
    }    
</script>  