css：即改变按钮的文本值和背景

Question

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

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

• li 和输入有不同的背景，并且这些应该是可定位的。
• 输入应具有动态宽度（取决于值）。
• 输入的值应该几乎位于输入的底部。

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

问题正是：IE8和IE9移动了值的文本，IE8也移动了背景。

我试图解决这个问题并制作了这个 css（这只是一个“debug-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 中的活动状态？

谢谢你！

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;

}

请参阅我的小提琴以获取更多详细信息： 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/