Question

对于Chrome和Safari中的框阴影，有一些奇怪的行为。

当我使用box-shadow时，最近版本的Chrome浏览器支持不带-webkit-*前缀的CSS3规范，但Safari浏览器不支持。

如果两个阴影相同，Chrome简单版会覆盖-webkit-box-shadow和box-shadow，这样做也不会太糟糕。

所以要在Chrome 和 Safari中设置我的方框阴影，我需要关注。

.some-class {
   box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

在Safari和Chrome以及FF和Opera

中都能正常工作

但对于IE9来说，盒子阴影看起来很难看。对于IE9，我必须有一个不同的盒子阴影，应该使用类似box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);的

所以我的CSS如下

.some-class {
   box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
   -webkit-box-shadow: 0px 0px 4px 0 rgba(0,0,0,0.65);
}

但我不希望FF拥有IE9盒子阴影，所以我插入了CSS hack

.some-class {
-webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}
/* IE9 */
@media all and (min-width:0) {
    .some-class  > ul.navigationlist{
         box-shadow: 0 0 4px 1px rgba(0,0,0,0.35) \0/;
    }
}

现在我的问题：有一个更好的方法吗？除了条件评论，我知道这是为此设计的，等等，等等......

编辑第二个问题：
你们都看到IE9中的盒子阴影与FF或Chrome中的盒子阴影不同吗？

编辑
第三个问题：
-ms-*使用的box-shadow前缀是否与-ms-box-shadow不同，因为{{1}}不起作用？

Answer 1

通常，您可以从供应商前缀级联到标准属性值，但在您的情况下，我认为您需要反向使用级联效果并将标准放在顶部，并将供应商前缀放在下面，允许供应商特别是覆盖IE以外的所有标准。

.some-class {
    box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.65);
}

Answer 2

使用-moz-box-shadow样式用于FF

编辑：某些css3样式有-ms前缀，但不是全部，不幸的是IE9不接受前缀-ms-box-shadow，所以你必须使用条件运算符，但是在其他样式的情况下，您可以使用该前缀，例如-ms-behavior，-ms-filter等。

Answer 3

使用条件注释包含IE9特定样式表：

<style>
/*regular css*/
</style>

<!--[if IE 9]>
<style>
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.35);
</style>
<![endif]-->

Safari和Chrome以及IE的盒子阴影

3 个答案: