如何解决在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>

当我点击这个按钮（按钮焦点，活动），在IE，Firefox浏览器上，文字会闪烁（向下移动几个点）。如何用CSS修复？希望你能帮我。谅谅

演示。http:/jsfiddle.netWorkWeht6pvoqz1

Answer 1

把你的文字用 span 包起来，然后给它定位：绝对，它就不会再乱动了。

<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;
}

Answer 2

在FF上，某种迷你重置可以解决这个问题，但在IE上，使用额外的跨度按钮可以解决这个问题。

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

CSS:

.button {
    height: 50px;
    width: 160px;
    font-size: 16px;
    background: #eee;
    border-radius: 5px;
    border: none;
}
button:active,
button:focus,
button:hover {
    margin:0;
    padding:0;
}

JSFiddle 的。

希望能帮到你

更新。 有一种处理IE问题的方法--基于以下几点。本回答 (@alicarn回答)，但这个方法的问题是它会在chrome上产生相反的闪烁。所以我想在这种情况下，你需要选择你的毒药。

Answer 3

这是IE的默认行为。我想这是无法修复的。

与其使用 扣子 标签，我建议使用 锚 标签。