Question

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

示例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;
}

问题在于，如果浏览器支持box-shadow但不支持border-radius，则会遇到问题。在这种情况下，按钮将使用box-shadow，忽略border-radius 和 aply no-borderradius类与背景图像。我可以通过创建两个后备来解决它。

示例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这两个类将用于设置元素的样式，我不禁想到这会导致问题？

Answer 1

Modernizr根据测试结果向html元素添加类（参见文档中的How Modernizr works）。这意味着该元素具有所有这些类，您可以简单地链接多个类选择器以缩小选择范围。

如果浏览器不支持其中一个规则或两者都，则您现有的解决方案会应用该规则，因此它与您要查找的内容相反。

请尝试使用此选择器：

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

关于您的评论，IE6无论如何都不支持border-radius和box-shadow属性，因此无关紧要。它仍将应用规则，因为它将选择器读为.no-boxshadow div.button。有关说明，请参阅我对this question的回答。

Answer 2

CSS可以使用，因为支持box-shadow的浏览器也支持border-radius [1]。

.no-boxshadow div.button { background:transparent url(btn.png) 0 0; }
.boxshadow div.button { border-radius:5px; box-shadow:inset 1px 1px 2px #ccc; }

使用带有多个css3样式的css类的modernizr？

2 个答案: