CSS：IE会改变按钮的文本值和背景。

Question

CSS：IE会改变按钮的文本值和背景。

3

我在列表中有一个提交按钮：

    <ul>
        <li><input type="submit" value="Pls don't shift" /></li>
    </ul>

li和input具有不同的背景，这些应该是可定位的。
输入框的宽度应该是动态的（根据值而定）。
输入框的值应该几乎在输入框的底部。

这些事情减少了解决问题的机会。

问题确切地说是：IE8和IE9会移动值文本，而IE8还会移动背景。

我试图解决它并编写了这个CSS（这只是一个“调试CSS”）：

    li {
    display: block;
    width: auto;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden;
    }
    input,
    input:active:hover {
    display: block;
    background: url(tools-48x48.png)  no-repeat center center;
    width: auto;
    height: 60px;
    border: 1px solid transparent;
    outline: none;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: visble;
    padding: 0 10px;
    margin: 2px;
}
input:active:hover {
border: 1px solid red;
}

最有趣的事情是：现在，如果我点击按钮的文本值，那么它会产生相同的错误移位，但如果我在其他地方点击（在按钮上，但不是在文本值上），那么它就能正常工作。

这就是我想写这篇文章的原因。如何在IE中禁用提交按钮的 :active 状态？

谢谢！

- Burnee

我也有这个问题，它让我疯狂！我相信你找到了这个网址http://haslayout.net/css/Button-Background-Shift-On-active-Bug，但它甚至没有提到文本值方面的问题？ - Pauli Price

我已经根据您的代码创建了这个Fiddle http://jsfiddle.net/f67Vw/。所以，如果我没错的话，主要问题是当我点击并按住鼠标时，文本会向下和向右移动1像素？ - Sato

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sato · Answer 1

我已在IE9中测试过这个，当我移除一些“未被”使用的样式时，输入文本在点击时不会移动。

移除的样式：

li {
    width: auto;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
input,
input:active:hover{
    background: url(tools-48x48.png) no-repeat center center;
    outline:none;
}

并添加了样式

input,
input:active:hover{
    position: relative;
    overflow: visible;

}

请查看我的Fiddle，了解更多细节：http://jsfiddle.net/f67Vw/4/

另一个不错的选择似乎是用精心设计的a元素替换它。

HTML

<ul>
    <li>
        <a href="#" class="button">Doesn't shift</a>
    </li>
</ul>

CSS

.button {
    display: block;
    width: auto;
    height: 19px;
    border: 1px solid transparent;
    color: #000;
    text-align: center;
    padding: 20px 10px;
    margin: 2px;
    text-decoration:none;
}

请查看我的 Fiddle 以获取更多详细信息：http://jsfiddle.net/f67Vw/4/