Я не могу удалить нажатый эффект кнопок в Internet Explorer 9

Я пытаюсь удалить нажатый эффект с кнопки на IE9. Во всех других браузерах у меня нет проблем.

Пожалуйста, взгляните на код

HTML

<button class="fancy">howdy!</button>

CSS

.fancy {
    width: 60px;
    height: 30px;    
    position: relative;
    top: 0px;
    margin: 0;
    padding: 0px;
    display: block;
    border: none;
    padding: 0;
    color: #FFF;
    font-size: 11px;
    background: green;
    outline: none;
    overflow: hidden;
    line-height: 11px;
}

.fancy:active,.fancy:focus
{
    padding:0px;
    margin:0px;
    border: none;
    outline:none;
    text-indent: 0;
    line-height: 11px;
}

Рабочая демонстрация http://jsfiddle.net/MDfvE/

Как вы можете видеть, при нажатии кнопки на IE9 вы увидите, что текст перемещается вправо и снизу. Я хочу удалить это.

Любая подсказка? Спасибо!

Ответ 1

IE распознает только: активный псевдокласс, когда элемент является якорем.

http://msdn.microsoft.com/en-us/library/cc848864%28v=VS.85%29.aspx

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

Ответ 2

Это поведение браузера, простое решение - использовать тег ссылки вместо кнопки (если запускается функция javascript).

<a href="#" onclick="myfunction()" role="button"><img src="myimg"/></a>

Если вы все еще хотите использовать <button>, я обнаружил, что в каждом браузере есть некоторые характеристики (в простой отладке):

Chrome добавляет outline и padding
Firefox добавляет множество вещей с рамкой стандартной кнопки
IE беспорядок с внутренним текстом position

Итак, чтобы исправить их, вам нужно манипулировать псевдоселекторами для поведения кнопки. И для IE хорошим решением является включение вашего текста в элемент и его относительное расположение. Например:

<button type="button" class="button"><span>Buttom or Image</span></button>

<style>
    button,
    button:focus,
    button:active{
        border:1px solid black;
        background:none;
        outline:none;
        padding:0;
    }
    button span{
        position: relative;
    }
</style>

Pen