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

Question

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

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

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

这些东西减少了解决问题的机会。

问题是: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;

}

在此处查看我的 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/