IE8和IE9 - 单击<按钮>后的样式</button>

Question

---

Alien先生和GionaF先生所说的都是诀窍。

然而，在这种特殊情况下，我们决定一起删除onclick事件和禁用=“禁用”，因为它没有任何意义。

---

我遇到了IE8和9中<input type="submit">元素的问题。

它看起来很好，正常，悬停和活跃状态。但是在单击按钮后，文本会出现某种阴影以及灰色，我似乎无法覆盖。

我觉得可能是onclick事件引起了这种情况，但可以通过CSS修复吗？

按钮的Html：

<input class="button" type="submit" id="CancelButton" name="CancelButton" value="Avbryt" onclick="window.setTimeout( disableButtons, 1 ); return true;" />
<input class="defaultbutton" type="submit" id="PublishButton" name="PublishButton" value="some_ez_publish_code" onclick="window.setTimeout( disableButtons, 1 ); return true;" />

CSS（很多类的名字，将它们排除在外）：

background-image: none;
background: url(../images/btn-sprite-large.png) 0px 0px no-repeat;
border: 0;
color: #fff;
cursor: pointer;
display: block;
font-size: 11px;
font-weight: 900;
height: 32px;
line-height: 26px;
text-align: center;
text-shadow: 0 -1px 0 #d12015;
width: 120px;

Answer 1

您似乎在点击后禁用按钮（功能disableButtons）。要更改文本的灰色（默认为禁用），您可以使用：

.button[disabled], .button:disabled {
    color:#fff;
}​

然后，正如Alien先生所说，你要找到一种方法来定位ie（可能是conditional comments）并从text-shadow切换到filter：

.ie .button {
    text-shadow:none;
    filter:/* etc */
}

Answer 2

IE对text-shadow: 0 -1px 0 #d12015;有问题，因此您需要使用专有属性

filter:DropShadow(Color=#d12015, OffX=1, OffY=0);

Answer 3

您无法在IE中更改已禁用按钮的浏览器样式，但您可以像这样包装按钮：

<div class="button-wrap">
    <a class="button" disabled="disabled"><span>My button</span></a>
    <span class="visible-text">My button</span>
</div>

然后根据需要定位和设置可见文本。像这样：

.visible-text {
    position: absolute;
    cursor: pointer;
    color: green; /* or whatever... */
}

使用可见性：隐藏在默认按钮文本上会保留按钮的宽度，这样您就可以在那里放置相同的文本而没有任何问题。

a.button span {
    visibility: hidden;
}

请在这里试试：

http://jsfiddle.net/fnwjT/47/