Текст в заблокированном и CSS стиле показывает движение в IE

Question

Я отключил и кнопки в стиле CSS. В Firefox отключенные кнопки вообще не перемещаются при нажатии (что и ожидается), в IE текст в кнопках по-прежнему перемещается на несколько пикселей.

Почему это происходит и, что более важно, как сделать отключенные стилизованные кнопки фактически отключенными в IE?

Answer 1

Так реализован этот конкретный браузер. Вне вашего контроля.

При веб-разработке рекомендуется не думать с точностью до пикселя, иначе несоответствия браузера в конечном итоге приведут вас в бешенство.

Answer 2

ну, немного поздно, но вы можете установить псевдокласс: active для отключенных кнопок на 0px.

button[disabled]:active{
     top: 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/