html - 框阴影元素到按钮标签

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

Example http://jsfiddle.net/H23Jy/1/

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

CSS

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

而且阴影似乎在 Chrome 35 上也能正常工作。

但是如您所见，按钮不会与其他按钮垂直对齐，因此您可以使用 -webkit-transform: translateY(-3px); 代替

---

结果