将Modernizer与使用多个css3样式的css类一起使用？

我正在使用Modernizer为不支持css3的浏览器创建替代样式。它工作得很好，但我还没有找到一个解决方案与css类使用一个以上的css3风格

例1：

div.button {
box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
border-radius: 5px; /* second css3 style */
}

/* fallback for browsers that don't support css3 */
.no-borderradius div.button {
background: transparent url(my-button.png) left top;
}

这里的问题是，如果浏览器不支持框阴影，但不支持边界半径，则会遇到问题。在这种情况下，两个按钮都将使用方框阴影，忽略边框半径，并将无边框半径类应用于背景图像。我可以通过创建两个后备方案来解决这个问题

例2：

  div.button {
    box-shadow: inset 1px 1px 2px #ccc; /* first css3 style */
    border-radius: 5px; /* second css3 style */
    }

    /* fallback for browsers that don't support css3 */
    .no-borderradius div.button, .no-boxshadow div.button /* no-boxshadow added */  {
    background: transparent url(my-button.png) left top;
    }

---

这里的问题是，如果浏览器不支持border radius和box shadow，那么这两个类都将用于设置元素的样式，我不禁想这可能会导致问题？

Modernizer会根据测试结果将类添加到

html

元素中（参见文档中）。这意味着元素具有所有这些类，您可以简单地链接多个类选择器以缩小选择范围

如果浏览器既不支持其中一条规则，也不支持两条规则，那么您现有的解决方案将应用该规则，因此这与您正在寻找的相反

请尝试此选择器：

.no-borderradius.no-boxshadow div.button {
    background: transparent url(my-button.png) left top;
}

---

关于您的评论，IE6无论如何都不支持

边界半径

和

框阴影

属性，所以这不重要。当它将选择器读取为

.no-boxshadow div.button

时，仍将应用该规则。请参阅我对的回答以获取说明。

CSS可以工作，因为支持

框阴影的浏览器也支持
边框半径

感谢BoltClock的快速回答，但我认为ie6在这些选择器方面存在问题。再次感谢！我认为如果你发现了IE 6没有问题的东西，它会值+10@Sacha：如果您需要支持IE6，请在您的问题中明确提及。@Sacha，@Cody，是的，IE6有问题，但在这种情况下，它仍将应用该规则。请参阅我的编辑。
.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }