html - 单击时按钮图像略微向上移动(在 Internet Explorer 中)

Question

有谁知道为什么图片在被点击时可能会轻微移动/抖动(只发生在 IE 中)？这是我们的按钮:

<button class="join" name="register" value="" onClick="window.location = 'location'" tabindex="4"></button>

这是类:

button.join {
        background: url(../images/join.png);
        border: 0;
        height:  56px;
        width: 178px;
        cursor: pointer;
        }

Answer 1

按钮标记总是很难跨浏览器设置正确的样式。只要您为 onClick 使用 javascript，就没有真正的理由使用按钮标签。尝试使用 anchor 标记，定位所有状态并设置图像的位置。

<a class="join" href="#" id="register" onClick="window.location = 'location'" tabindex="4">Button</a>

a.join:link,
a.join:visited
a.join:hover,
a.join:active
{
        background: url(../images/join.png) 0 0 no-repeat;
        border: 0;
        text-indent: -999em; /* Optional - To remove the HTML text from the button */
        height:  56px;
        width: 178px;
        cursor: pointer;
}