Блог

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

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

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

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

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

Я попытался решить эту проблему и создал этот css (это всего лишь «debug-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;
}
  

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

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

Спасибо!

Я протестировал это в 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 /