safari - 按钮样式在 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;
}

这解决了它。