0

我注意到每个浏览器呈现的盒子阴影模糊半径略有不同，所以我想把它弄平。但是，由于他们使用无前缀版本，我需要为不同的浏览器提供不同的样式表。最可靠的方法是什么？

例如：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>
4

1 回答 1

0

作为 CSS 属性的 box-shadow 肯定已经为一些不同的浏览器使用了供应商前缀。如果你看一下我从网络上其他地方提取的这个随机 box-shadow 片段，你会发现它使用不同的 webkit 声明，firefox 在主要的 box shadow 属性之上：

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

例如，我知道 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 引擎和主 box-shadow 属性的浏览器有一个很好的了解：

.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 中的供应商前缀实现的（？？！）

于 2013-06-15T23:18:21.597 回答