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

我真的需要一些帮助。我在论坛和互联网上搜索了几个小时。我发现了许多文章，但它们要么没有关于如何做到这一点的明确的工作答案，要么太旧了

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

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

我尝试了以下方法，但没有任何效果。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">");
 }

---

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

如果通过功能检测检测到传入的浏览器支持您尝试执行的操作，您是否可以默认呈现2D页面，但重定向到3D页面

e、 g

或者相应地加载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\">");
}

一些建议：

服务器端检测 根据为CSS文件提供服务的服务器，您可以根据用户代理标头配置/自定义它以提供所需的文件

链接到CSS，具体取决于浏览器 来自卑鄙小人

主体上带有类和重写规则的单个CSS 检测浏览器，并根据浏览器在主体上添加类，例如document.body.className+=msie

然后覆盖css中需要的规则

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

---

我建议使用一个用于浏览器检测的库，它们通常经过更多测试。我刚刚发现，这似乎做得很好。

通过这里的用户提供的一些很好的建议，我能够正确地做到这一点！IE11是罪魁祸首。MS过早地将IE11定义为webkit浏览器，因此某些属性（如用户代理）已被更新。这里有一篇关于这个的文章

所以MSIE或RV不起作用，因为它混淆了webkit浏览器。我改用了三叉戟

以下脚本用于在客户端的所有浏览器的最新版本中动态加载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>

---

在IE>=10的标准模式下，条件注释不再有效…Hi@CBroe。在IE 10中，和似乎起作用。但是，当我试图排除css而不是具有相同评论风格的IE时，它就不起作用了。你有什么有用的建议吗？用户服务器端UA字符串嗅探。有一些库可用于此。嗨@scunliffe！在本例中没有，因为它是一个定制的艺术作品，设计用于在线构建器平台中的IFrame，因此我无法访问整个页面的css或html。在IFrame中，你的页面在很大程度上独立于它的周围环境——那么你认为你在那里不能做什么呢…？Hi@CBroe，这个回答是关于基于浏览器进行页面重定向。我想做的是在Iframe中动态加载它。@scunlife我在IE中设置了您在JSBin中提供的第二个脚本，并且由于某种原因IE默认为webkit css，这是我以前遇到的问题。这是链接是的，这就是问题所在。MS对IE 11进行了用户代理更改。IE 11返回Mozilla/5.0 Windows NT 6.3；三叉戟/7.0；rv 11.0类似壁虎。在这篇文章中找到了它。我似乎在这里遇到了一个用户代理问题，我想这就是为什么我不能在JSBIN中为我加载它的原因。我访问过几个网站，比如我的用户代理是什么，尽管我使用的是IE 11，但它显示为Mozilla。我能在这里做什么？因为我找到的服务器端和客户端脚本都需要用户代理。我找到了大部分解决方案。IE11导致了大部分问题。我不能使用Gecko或rv，因为这让webkit浏览器感到困惑。由于混合了IE11，我不得不使用三叉戟。IE真的不应该开始识别为webkit，直到所有的转换和所有的3D都在IE中实际工作。我更新了JSBIN。现在的问题是脚本本身不会在Chrome中启动。有什么想法吗？

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>