Question

我有一个输入类型=按钮，背景颜色设置为不同的颜色：悬停 - 请参阅http://jsfiddle.net/hc2Eu/3/

在IE（所有版本）中 - 当我按下按钮时，移开按钮，然后鼠标按钮 - 背景颜色保持在：悬停设置，直到再次将鼠标悬停在它上面。

是否有一些解决方法？最好不要用js？（IE6没有必要）

Answer 1

可能有<input type="button">的修复 - 但如果有，我不知道。

否则，一个好的选择似乎是用一个精心设计的a元素替换它。

.button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

优点包括a元素将在不同的（较旧的）Internet Explorer版本之间保持一致，而无需任何额外的工作，我认为我的链接看起来比该按钮更好：）

Answer 2

尝试使用type属性选择器查找按钮（也许这也会修复它）：

input[type=button]
{
  background-color: #E3E1B8; 
}

input[type=button]:hover
{
  background-color: #46000D
}

Answer 3

在背景图片调用后，您需要确保图像先出现并放入逗号。那它确实有效：

    background:url(egg.png) no-repeat 70px 2px #82d4fe; /* Old browsers */
background:url(egg.png) no-repeat 70px 2px, -moz-linear-gradient(top, #82d4fe 0%, #1db2ff 78%) ; /* FF3.6+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82d4fe), color-stop(78%,#1db2ff)); /* Chrome,Safari4+ */
background:url(egg.png) no-repeat 70px 2px, -webkit-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Chrome10+,Safari5.1+ */
background:url(egg.png) no-repeat 70px 2px, -o-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* Opera11.10+ */
background:url(egg.png) no-repeat 70px 2px, -ms-linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#82d4fe', endColorstr='#1db2ff',GradientType=0 ); /* IE6-9 */
background:url(egg.png) no-repeat 70px 2px, linear-gradient(top, #82d4fe 0%,#1db2ff 78%); /* W3C */

输入类型=按钮上的背景颜色：悬停状态粘在IE中

3 个答案: