检测浏览器类型并应用相关样式答案

【问题标题】：Detecting Browser type and applying relevant styling检测浏览器类型并应用相关样式
【发布时间】：2014-07-03 14:58:05
【问题描述】：

我为我的公司构建了一个“内部”网络应用程序，主要使用我公司的几个部门使用的 PHP/MySQL。

我对网站进行了样式设置（我认为是天真），以便它在使用 Chrome 和 Firefox 时运行良好并且看起来不错。直到最近，这还不是问题，因为使用它的每个人都在使用这些浏览器。

但是，用户列表中添加了一个新部门，他们都使用旧版本的 IE，并且他们没有权限在自己的机器上升级或安装任何软件。我发现了一两个问题，但结果并不多。

我希望能够检测到某人正在使用什么浏览器并相应地应用特定的样式。

我在 JavaScript 方面不是最擅长的，但我想这就是它的完成方式？但是怎么做呢？

【问题讨论】：

google search
Read up on Modernizr.
这不是一个坏问题，我也曾开发过具有类似要求的内部应用程序，因为 Web 应用程序在 IE8 上的行为/外观略有不同，这是公司的要求。我将在下面的答案中发布我的解决方案。

标签： javascript php mysql css

【解决方案1】：

您可以强制 IE 加载兼容模式。希望您正在寻找它的 IE 8 版本。使用以下内容：

<meta http-equiv="X-UA-Compatible" content="IE=8">

试试这个。您可以根据需要更改版本。

【讨论】：

【解决方案2】：

把这个放到head

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

或者使用自定义构建的modernizr进行功能检测，而不是浏览器检测：

http://www.modernizr.com

【讨论】：

【解决方案3】：

您可以在您的 html 中检查用户是否正在使用 IE

<!--[if IE]>
Place styles here for IE (so all your scripts and links to stylesheets and scripts)
<![endif]-->

要恢复到其他样式：

<!--[if !IE]>
Place styles here for not IE (so all your scripts and links to stylesheets and scripts that you were using before)
<![endif]-->

您需要将这两者放在同一个文档中，以确保样式不会相互冲突。

http://www.mediacollege.com/internet/html/detect/detect-ie.html

【讨论】：

【解决方案4】：

您可能正在寻找类似的东西：

    var navigator = function (){
        var ua= navigator.userAgent, tem, 
        M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
        if(/trident/i.test(M[1])){
            tem=  /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
            return 'IE '+(tem[1] || '');
        }
        M= M[2]? [M[1], M[2]]:[navigator.appName, navigator.appVersion, '-?'];
        if((tem= ua.match(/version\/([\.\d]+)/i))!= null) M[2]= tem[1];
        return M.join(' ');
    };
//usage
//IE < 10
        if(navigator()[0] == "I" && navigator().match(/\d+/) < 10){
            alert('You are using '+navigator+'.Please update to version >= 10');
        }

【讨论】：

【解决方案5】：

正如其他人所提到的，您最好的选择是使用两种不同的样式元素，一种用于 IE，一种用于非 IE：

<!--[if IE 8]>
  <link rel="stylesheet" type="text/css" href="./css/blahblah-ie8.css"/>
<![endif]-->

<!--[if !IE 8]>
    <link rel="stylesheet" type="text/css" href="./css/blahblah.css"/>
<![endif]-->

您可以针对单个版本的 IE 或所有版本

<!--[if IE 8]> 或 <!--[if IE]>

您可能想要的另一件事是在浏览器根本不支持您的应用程序时警告用户。所以作为企业软件，webapp 可能只支持 FF、Chrome 和 IE——你不希望用户在你的帮助台上询问为什么 Opera 或 Maxthon 出现问题。

为此，我使用了一个在开始时加载的 Javascript，它检测用户代理并在屏幕顶部显示一个浮动 div，显示一条消息，说明用户可以使用浏览器，但是不支持。

【讨论】：