Input в Internet Explorer < 10

Тема в разделе "Верстка", создана пользователем sasha_ua, 13 авг 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Здравствуйте.

    Вот столкнулся с такой проблемой, перестает работать левый 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;
    }
    
    Обычно забивал на это, т.к. было непринципиально но пришло время разобраться.
    Предполагаю что возможно дело в появляющемся крестике, который и смещает контент..
     

    Вложения:

    • input.jpg
      input.jpg
      Размер файла:
      12,9 КБ
      Просмотров:
      13
  2. yoovi

    yoovi Писатель

    Регистр.:
    11 авг 2014
    Сообщения:
    5
    Симпатии:
    1
    В нем в самом, в крестике. http://htmlbook.ru/css/-ms-clear
    А если быть точнее просто пропишите правило с префиксом для ослика.

    Код:
    
    .callback input[type=text]::-ms-clear {
        display: none;
    }
    
    
     
  3. sasha_ua

    sasha_ua Постоялец

    Регистр.:
    23 июн 2010
    Сообщения:
    66
    Симпатии:
    0
    Попробовал, крестик убирается но паддинг все еще не работает. Псевдоэлемент работает только в 10 и выше.
     
  4. yoovi

    yoovi Писатель

    Регистр.:
    11 авг 2014
    Сообщения:
    5
    Симпатии:
    1
    На сколько я знаю они этот крестик ток в 10 и добавили.
    Попробовал у себя добавить в 10 ослике все норм ( без крестика ).

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

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

    Dekster Писатель

    Регистр.:
    21 мар 2012
    Сообщения:
    1
    Симпатии:
    0
    добавьте к стилям text-align:left; тогда будет работать padding
     
  6. Savetchuk

    Savetchuk Создатель

    Регистр.:
    10 июн 2014
    Сообщения:
    11
    Симпатии:
    1
    &nbsp; в инпут можно добавить