css - 单击 IE、Firefox 上的按钮时，如何修复按钮闪烁(向下移动)中的文本？

Question

我有这个代码:

.button {
    height: 50px;
    width: 160px;
    font-size: 16px;
    background: #eee;
    border-radius: 5px;
    border: none;
}

<button type="button" class="button">Submit</button>

当我点击这个按钮(button focus, active)时，文本会在IE、Firefox浏览器上闪烁(向下移动几个点)。如何用CSS修复它？希望你能帮助我。谢谢

演示:http://jsfiddle.net/WorkWe/ht6pvoqz/1/

Answer 1

用 span 包裹你的文本并给它 position: absolute 并且它不会再闪烁了!

<button type="button" class="button"><span>Submit</span></button>

.button {
    height: 50px;
    width: 160px;
    background: #eee;
    border-radius: 5px;
    border: none;
    margin: 0;
    padding: 0;
    position: relative;
}
span {
    position: absolute;
    top: 5px;
    left: 5px;
}