Question

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

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

Answer 1

当然，作为CSS属性的box-shadow已经为几个不同的浏览器使用了供应商前缀。如果你看看我从网上其他地方提取的这个随机box-shadow片段，你会看到它在webkit的基础上使用了不同的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;

我知道例如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中的供应商前缀无法实现特定的浏览器定位（??！）

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

1 个答案: