Стиль кнопок не работает в 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;
}

Это исправить.