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

Question

Я пытаюсь убрать нажатый эффект с кнопки на 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, вы увидите, что текст перемещается вправо и вниз.Я хочу удалить это.

Есть подсказка?Спасибо!

Answer 1

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

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

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

Answer 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>

Ручка