在Firefox
http://jsfiddle.net/qwbpZ/4/中看到这个小提琴
在悬停时,您将看到此灰色线条
它在谷歌浏览器中很好,但这个灰色边框出现在其他浏览器中.
我怎么解决这个问题?
CSS
a,a:visited {color:#fff} .btn { display: inline-block; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-Box-shadow: 0 9px 0 #000000,0 13px 0 rgba(0,0.1); -moz-Box-shadow: 0 9px 0 #000000,0.1); Box-shadow: 0 9px 0 #000000,0.1); -webkit-transition: -webkit-Box-shadow .2s ease-in-out; -moz-transition: -moz-Box-shadow .2s ease-in-out; -o-transition: -o-Box-shadow .2s ease-in-out; transition: Box-shadow .2s ease-in-out; padding: 0px; background: black; /* see ? */ } .btn span { display: inline-block; padding: 22px 22px 11px; font-family: Arial,sans-serif; line-height: 1; text-shadow: 0 -1px 1px rgba(19,65,88,.8); background: #2e2e2e; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-Box-shadow: inset 0 -1px 1px rgba(255,255,.15); -moz-Box-shadow: inset 0 -1px 1px rgba(255,.15); Box-shadow: inset 0 -1px 1px rgba(255,.15); -webkit-transition: -webkit-transform .2s ease-in-out; -moz-transition: -moz-transform .2s ease-in-out; -o-transition: -o-transform .2s ease-in-out; transition: transform .2s ease-in-out; color: #FFF; font-size: 32px; border: 0 } .btn:hover { -webkit-Box-shadow: 0 8px 0 #000,0 12px 10px rgba(0,.3); -moz-Box-shadow: 0 8px 0 #000,.3); Box-shadow: 0 8px 0 #000,.3); } .btn:hover span { -webkit-transform: translate(0,-4px); -moz-transform: translate(0,-4px); -o-transform: translate(0,-4px); transform: translate(0,-4px); } .btn:active { -webkit-Box-shadow: 0 8px 0 #000,.3); -webkit-transition: -webkit-Box-shadow .2s ease-in-out; -moz-transition: -moz-Box-shadow .2s ease-in-out; -o-transition: -o-Box-shadow .2s ease-in-out; transition: Box-shadow .2s ease-in-out; } .btn:active span { -webkit-transform: translate(0,0px); -moz-transform: translate(0,0px); -o-transform: translate(0,0px); transform: translate(0,0px); }
解决方法
似乎没有完美的解决方案:阴影和边界半径之间的这种抗偏置像素是粘性的.
所以,我想出了以下两个解决方案:
>使用额外的伪元素,这将成为问题所在:http://jsfiddle.net/kizu/qwbpZ/5/
>添加更多额外的黑色阴影(正常和插入):http://jsfiddle.net/kizu/qwbpZ/6/ – 我在这里添加了两个,但仍然有一些像素可见,如果你再添加两个,它几乎可以.