Изображение кнопки немного увеличивается при нажатии (в 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

Тэги кнопок всегда мешают правильно оформить кросс-браузер.Пока вы используете javascript для onClick, нет никакой реальной причины использовать тег кнопки.Попробуйте использовать тег привязки, нацеливаясь на все состояния и устанавливая положение изображения.

<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;
}