Input в Internet Explorer < 10

[sasha_ua]

Здравствуйте.

Вот столкнулся с такой проблемой, перестает работать левый padding (на скрине), input'u заданы padding:

HTML

    <form class="callback">
        <span>Обратный звонок</span>
        <input type="text" name="callback-name" placeholder="Ваше имя">
        <input type="text" name="callback-phone" placeholder="Ваш телефон">
        <input type="submit" value="Заказать звонок">
    </form>

CSS

.callback input[type=text] {
    display: block;
    width: 220px;
    height: 18px;
    margin: 0 auto;
    background: #5b0e20;
    border: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font: 300 16px/18px "Roboto";
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
    padding: 11px 20px 11px 20px;
}

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

 

[yoovi]

В нем в самом, в крестике. Для просмотра ссылки Войди или Зарегистрируйся
А если быть точнее просто пропишите правило с префиксом для ослика.

.callback input[type=text]::-ms-clear {
    display: none;
}

 

[sasha_ua]

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

 

[yoovi]

На сколько я знаю они этот крестик ток в 10 и добавили.
Попробовал у себя добавить в 10 ослике все норм ( без крестика ).

Padding слева идёт из за text-align: center;

UPD Сейчас заметил, что поля в IE ведут себя не так как в хроме, паддинг идёт только в конце сообщения ( т.е если вы заполните все поле и вернётесь в начало паддинг будет слева а правая часть без него ), тогда как хром добавляет обе стороны в hidden

 

[Dekster]

добавьте к стилям text-align:left; тогда будет работать padding

 

[Savetchuk]

&nbsp; в инпут можно добавить