按钮样式在Safari中不起作用

Question

我有以下CSS3风格：

.shiny-btn {
    cursor: pointer;
    text-align:center;
    width: 15em;
    padding: .5em;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000;
    border: solid thin #882d13;
    -webkit-border-radius: .7em;
    -moz-border-radius: .7em;
    border-radius: .7em;
    -webkit-box-shadow: 2px 2px 3px #999; 
    box-shadow: 2px 2px 2px #bbb;
    background-color: #ce401c;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
}

.clicked {
    background-color:gray;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
}

样式.shiny-btn有效，但"shiny-btn clicked"在Safari 5.0.5中不起作用。

你知道为什么吗？

Answer 1

background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));

当您拥有class="shinybtn clicked"时，此行会被继承。它覆盖两个clicked属性。

.clicked {
  background-color:gray;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7) inset;
  background-image:none;
}

修复它。