框阴影元素到按钮标记

Question

阴影在IE和Firefox上的所有元素上都能正常工作，但不适用于Chrome和Safari中的按钮元素：

http://jsfiddle.net/q8xaa/

<button class="btn-test">
<span class="btn">test</span>
</button>


.btn-test {
    background-color: transparent;
    border: 0;
    padding: 0px;
}
.btn-test:hover .btn {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.btn-test .btn {
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -ms-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;

    -webkit-box-shadow: 4px 4px 0px #000;
    -moz-box-shadow: 4px 4px 0px #000;
    box-shadow: 4px 4px 0px #000;

    background-color: #f00;
    margin: 0px;
    padding: 10px;
    height: 40px;
    display: inline-block;
}
button {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;

}

关于如何解决的任何想法？

Answer 1

  

示例 http://jsfiddle.net/H23Jy/1/

我尝试强制进行零CSS3转换，如下所示

CSS

button span {
    -webkit-transform: translate3d(0,0,0);
}

并且影子在Chrome 35上似乎也能正常工作。

但正如您所看到的那样，按钮没有与其他按钮垂直对齐，因此您可以使用-webkit-transform: translateY(-3px);代替

---

<强>结果