Question

我真的需要一些帮助。我在论坛和互联网上搜索了几个小时。我发现了很多文章，但是他们要么没有明确的工作答案，要么就是如此，要么他们太老了。

我有2个样式表。一个用于IE，一个用于所有其他浏览器。我知道这并不理想，但这是一个复杂的项目，它是事物发展的方式。一张是3D（webkit），另一张是2D（IE）。我需要能够基于浏览器加载CSS。我只需要2个选项，IE和其他选项。

我尝试了条件语句，我尝试过浏览器检测。必须适用于现代浏览器。

我在头脑中尝试了以下内容，但没有任何效果。 webkit CSS要么覆盖IE CSS，要么根本不加载。请协助。

尝试1（问题 - webkit css覆盖了IE CSS，即使它已被评论）：

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

<link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarWebkit.css" />

<!--<![endif]-->

<!--[if gte IE 9]><!-->   

  <link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" />

<!--<![endif]-->

<!--[if lte IE 9]><!-->   

  <link rel="stylesheet" type="text/css" href="http://secure.cart32.com/WarrenKahn/SolarIE.css" />

<!--<![endif]-->

尝试2（问题 - 在任何浏览器中都不会加载）：

var nAgt = navigator.userAgent;
var browserName  = navigator.appName;
var nameOffset,verOffset,ix;

// In Opera, the true version is after "Opera" or after "Version"
if ((verOffset=nAgt.indexOf("Opera"))!=-1) {
 browserName = "Opera";
}
// In MSIE, the true version is after "MSIE" in userAgent
else if ((verOffset=nAgt.indexOf("MSIE"))!=-1) {
 browserName = "Microsoft Internet Explorer";
}
// In Chrome, the true version is after "Chrome" 
else if ((verOffset=nAgt.indexOf("Chrome"))!=-1) {
 browserName = "Chrome";
}
// In Safari, the true version is after "Safari" or after "Version" 
else if ((verOffset=nAgt.indexOf("Safari"))!=-1) {
 browserName = "Safari";
}
// In Firefox, the true version is after "Firefox" 
else if ((verOffset=nAgt.indexOf("Firefox"))!=-1) {
 browserName = "Firefox";
}
// In most other browsers, "name/version" is at the end of userAgent 
else if ( (nameOffset=nAgt.lastIndexOf(' ')+1) < 
          (verOffset=nAgt.lastIndexOf('/')) ) 
{
 browserName = nAgt.substring(nameOffset,verOffset);
 fullVersion = nAgt.substring(verOffset+1);
 if (browserName.toLowerCase()==browserName.toUpperCase()) {
  browserName = navigator.appName;
 }
}

 if (browserName == "Microsoft Internet Explorer") {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarIE.css">");
 }
 else {
 document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarWebkit.css">");
 }

我做了其他尝试，但这些似乎是最有效的。欢迎任何工作解决方案。提前谢谢。

Answer 1

默认情况下，您是否可以渲染2D页面，但如果您检测到（通过功能检测）传入的浏览器支持您尝试执行的操作，则会重定向到3D页面？

e.g。

<script>
  if(typeof(navigator.fancyNewThing) == 'function'){
    location.href = '3Dpage.html';
  }
</script>

或相应加载您的CSS。

您的浏览器检测代码（问题上方）有点矫枉过正。虽然用户代理单独浏览浏览器并不总是最明智的做法，但这个脚本应该为你识别IE。

if(navigator.userAgent.indexOf('MSIE') != -1){
  document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarIE.css\">");
} else {
  document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarWebkit.css\">");
}

Answer 2

一些建议：

服务器端检测

根据提供CSS文件的服务器，您可以根据User-Agent标题配置/自定义它以提供所需的文件。

根据浏览器链接到CSS

来自scunliffe的

See answer

单个CSS，包含正文和重写规则

检测浏览器，并根据浏览器在正文上添加一个类，例如document.body.className += " msie"

然后覆盖css中所需的规则

body.msie someTag { /*msie specific rules*/ }

我建议使用库进行浏览器检测，通常会对它们进行更多测试。我刚刚发现WhichBrowser似乎做得非常好。

Answer 3

根据用户的一些很好的建议，我能够做到这一点！ IE11是这里的罪魁祸首。 MS过早地将IE11定义为webkit浏览器，因此某些属性（如用户代理）已更新。这是一篇关于此的文章。 http://www.nczonline.net/blog/2013/07/02/internet-explorer-11-dont-call-me-ie/

所以MSIE或RV没有工作，因为它混淆了webkit浏览器。我改用了Trident。

以下脚本适用于在客户端的所有浏览器的最新版本中动态加载CSS：

if(navigator.userAgent.indexOf('Trident') != -1){
  document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarIE.css\">");
  } 


  else {
  document.write("<link type=\"text/css\" rel=\"stylesheet\" href=\"http://secure.cart32.com/WarrenKahn/SolarWebkit.css\">");

}

</script>

在现代浏览器中加载浏览器特定的样式表

3 个答案:

服务器端检测

根据浏览器链接到CSS

单个CSS，包含正文和重写规则