Кнопка IE8 застревает, когда установлено событие mouseup

Question

У меня есть <button> с вложенным изображением, и я использую jQuery для переключения атрибута изображения src на mousedown и mouseup. При нажатии кнопки в IE8 изображение перемещается вниз и вправо на 1 пиксель, как это делают кнопки в IE, но затем оно остается там и не возвращается в исходное положение. Если я удаляю событие mouseup, кнопка работает нормально, но, конечно, мое поведение кнопки js нарушается.

В поиске этой проблемы я обнаружил еще одну ошибку, которая заставляет кнопку с фоном CSS перемещаться вверх и влево при active, но затем возвращаться. Моя кнопка застревает, и только когда регистрируется событие mouseup.

Разметка выглядит так:

HTML:

<button type="button" id="sdbSearchButton" title="Zoom to this room">
    <img id="sdbSearchButtonImg" src="images/control_play.gif" />
</button>

CSS:

label.sdbAttr button {
    float: left;
    background-color: white;
    border: none;
    outline: none;
    margin-left: 5px;
    padding: 0px;
    height: 16px;
    width: 16px;
}

JavaScript:

$('#sdbSearchButton').mousedown(function(e) {
    $(this).children().attr('src', 'images/control_play_blue.gif');
    searchForSpace();
}).mouseout(function() {
    $(this).children().attr('src', 'images/control_play.gif');
}).mouseup(function() {
    $(this).children().attr('src', 'images/control_play.gif');
});

Answer 1

Почему вы используете IMG?

button {
background-image: url('img1')
}
button:active {
background-image: url('img2')
}