Safari和Chrome以及IE的盒子阴影

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中的盒子阴影不同吗？

---

编辑
第3个问题:
是否有不同的前缀-ms-*,box-shadow因为-ms-box-shadow不起作用？

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);
}