0

我正在使用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，忽略边框半径并将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 这两个类都将用于设置元素的样式，我不禁想到这会导致问题吗？

4

2 回答 2

1

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

如果浏览器不支持其中一个规则或两者都不支持，您现有的解决方案将应用该规则，因此这与您正在寻找的相反。

试试这个选择器：

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

关于您的评论，IE6 无论如何都不支持border-radius和box-shadow属性，所以没关系。它仍然会应用规则，因为它将选择器读取为.no-boxshadow div.button. 请参阅我对这个问题的回答以获取说明。

于 2011-05-22T10:35:47.030 回答
0

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; }
于 2011-05-22T12:44:35.860 回答