Javascript 在没有浏览器检测的情况下为不同的浏览器提供不同的css框阴影？

我注意到每个浏览器渲染的框阴影模糊半径略有不同，所以我想平衡一下。然而，由于他们使用的是非固定版本，我需要为不同的浏览器提供不同的样式表。最可靠的方法是什么

例如：Mozilla使用

moz_style.css

，Chrome使用

Chrome_style.css

我正在使用用户代理检测进行此操作，但我听说它不太可靠：

<script>
if(BrowserDetect.browser=="Chrome") {
  document.write('<link rel="stylesheet" href="css/chrome.css" type="text/css" media="all" />')
}
</script>

if（BrowserDetect.browser==“Chrome”）{
文件。写入（“”）
}

当然，作为CSS属性的box shadow已经为一些不同的浏览器使用了供应商前缀。如果您查看我从web上其他地方提取的这个随机框阴影片段，您将看到它在主框阴影属性的顶部为webkit、firefox使用了不同的声明：

   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ 
}

例如，我知道Opera供应商前缀是-o，因此您可以将该供应商前缀附加到box shadow属性以覆盖Opera浏览器，尽管我不确定是否支持该前缀。此外，您还有IE特定的框阴影规则：

.ieShadow{
    display:block;
    position:absolute;
    z-index:2;
    top:5px;
    left:5px;
    right:-5px;
    bottom:-5px;
    filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=5);
    -ms-filter:"progid:DXImageTransform.Microsoft.Blur(pixelradius=5)";
    background-color:#444;
}

使用Javascript进行浏览器“嗅探”已不再是检测浏览器的方式

所以，是的，总而言之，您的盒子阴影代码肯定会因供应商前缀属性的不同而有所不同

编辑：关于这一主题的一些启示表明，它其实并不那么简单。供应商前缀真的有点乱

这使您对使用webkit引擎和主框阴影属性的浏览器有了一个很好的了解：

   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;

.box_shadow {
  -webkit-box-shadow: 0px 0px 4px 0px #ffffff; /* Android 2.3+, iOS 4.0.2-4.2, Safari 3-4 */
          box-shadow: 0px 0px 4px 0px #ffffff; /* Chrome 6+, Firefox 4+, IE 9+, iOS 5+, Opera 10.50+ 
}

---

因此，我猜特定的浏览器目标不可能在CSS中使用供应商前缀（？？）

浏览器之间存在1px的差异真的重要吗？你认为Firefox用户会拿出放大镜说“天哪，这不是一个与Chrome完美匹配的像素吗？”这些差异会随着时间和浏览器更新的流逝而消失：）你不需要任何浏览器检测。请注意，您正在创建美观的页面。如果它们在每个浏览器中看起来略有不同，那又怎样？这些浏览器的用户习惯于以某种方式观看事物，请不要试图改变它。@cimmanon我的网站在mac、pc和所有浏览器上显示像素完美且完全相同。文字像素完美，甚至字体。我还修复了框阴影，但我只需要找出如何针对不同的css。现在我只是使用浏览器检测。很好，但我更喜欢另一种方法。嗨，adaam，供应商前缀不是要删除吗？我的意思是，据我所知，现代mozilla和chrome不再阅读这些内容了，还是我错了？几乎每个浏览器都在box shadow上没有前缀。即使某些浏览器仍然保留前缀版本和非前缀版本，最后一行也会覆盖它。我正要发布一个有趣的比较。。我会编辑我的answer@adaam绝对地我的意思是，如果我们添加“重要”作为覆盖，它就可以工作。然而，这是有点危险的，因为前缀不是为此目的而设计的，而且迟早会失效。我会删除所有前缀，但这确实不安全，因为有些用户仍然使用较旧版本的mozilla和chrome进行浏览。@Damian我刚找到一篇关于跨浏览器兼容性的非常好的文章（）。它提到使用现代化，这也是一个还没有提到的好主意