css: т.е. смещает текстовое значение кнопки и фон

Question

У меня есть кнопка отправки в списке:

    <ul>
        <li><input type="submit" value="Pls don't shift" /></li>
    </ul>

• У li и входа разные фоны, и они должны быть позиционируемыми.
• Вход долженимеют динамическую ширину (в зависимости от значения).
• Значение входа должно быть почти у основания ввода.

Эти вещи уменьшают количество возможностей для решения проблемы.

И проблема именно в том, что IE8 и IE9 смещают текст значения, а IE8 тоже смещает фон.

Я попытался решить эту проблему и сделал этот CSS (это всего лишь отладка-css '):

    li {
    display: block;
    width: auto;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    float: left;
    overflow: hidden;
    }
    input,
    input:active:hover {
    display: block;
    background: url(tools-48x48.png)  no-repeat center center;
    width: auto;
    height: 60px;
    border: 1px solid transparent;
    outline: none;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: visble;
    padding: 0 10px;
    margin: 2px;
}
input:active:hover {
border: 1px solid red;
}

И самое интересное: теперь, если я нажимаю на текстовое значение кнопки, то происходит тот же плохой сдвиг, но если я щелкаю в другом месте (на кнопке, ноне на текстовом значении) тогда это работает.

Это был момент, когда я решил написать здесь.Как отключить кнопки отправки: активное состояние в IE?

Спасибо!

Answer 1

Я протестировал это в IE9, и когда я удаляю несколько стилей, которые «не используются», при нажатии на него вводимый текст не сдвигается.

удалены стили:

li {
    width: auto;
    border: 1px solid red;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
input,
input:active:hover{
    background: url(tools-48x48.png) no-repeat center center;
    outline:none;
}

и добавил стили

input,
input:active:hover{
    position: relative;
    overflow: visible;

}

См. Мою скрипку для более подробной информации здесь: http://jsfiddle.net/f67Vw/4/

Хороший другой вариант - заменить его на тщательно продуманный элемент a.

HTML

<ul>
    <li>
        <a href="#" class="button">Doesn't shift</a>
    </li>
</ul>

CSS

.button {
    display: block;
    width: auto;
    height: 19px;
    border: 1px solid transparent;
    color: #000;
    text-align: center;
    padding: 20px 10px;
    margin: 2px;
    text-decoration:none;
}

Снова смотрите мою скрипку для более подробной информации здесь: http://jsfiddle.net/f67Vw/4/