Текст выравнивание входного текста

Question

Рассмотрим следующий HTML фрагмент не для ввода тега -

Test Input : <input id="1" name="1" style="width:250px;height:50px;" value="Check alignment" /> 

До MS IE 8, по умолчанию input текст сверху выровнены (рисунок ниже).

Начиная с MS IE 9 и более поздних версий, input текст выравнивается по центру (снимок экрана ниже).

У меня есть требование, чтобы все input быть выровнены в верхней MS IE 9 и выше (другие браузеры - Chrome, Firefox и т.д., не большая проблема).

Я попробовал несколько вариантов стилей (ниже), но не может получить первое выравнивание как показано в MS IE 8.

• атрибут align для input не похоже на работу для текста. Однако, похоже, это работает на изображения.
• Атрибут text-align выравнивает текст только по горизонтали. Вертикальное выравнивание невозможно.
• атрибут vertical-align, кажется, не имеют никакого влияния :(

Я проверил Crossbrowser input text vertical alignment как предложил SO, но я все еще не мог получить, что работать по мере необходимости.

Я может быть что-то отсутствует. Любые предложения (читайте css, html или скрипт в порядке убывания предпочтения) приветствуются :)

В качестве примечания также будет полезно узнать с точки зрения UX относительно того, почему MS решила изменить поведение текста input после MS IE 8.

[EDIT]: Я имею дело с устаревшим кодом. Мне сообщили об изменениях, которые могут нарушить автоматическое тестирование пользовательского интерфейса. Итак, <textarea> - не первый выбор. Аналогичным образом, обертывание в <div> или замена на jquery основанной альтернативы составляет , а не.

Answer 1

Простым, но кросс-браузерным решением является использование прокладки для управления позиционированием текста. смотри ниже

input { 
 
    width:210px; 
 
    height:10px; 
 
    padding:20px; 
 
}

Input : <input id="1" name="1" value="Check alignment" />

Answer 2

An <input type=”text”> только одно поле ввода строки, он работает, как и должно быть, вы уверены, что вы не хотите использовать текстовое поле?

В любом случае попробуйте использовать отступ сверху и снизу, чтобы иметь визуальное подобие вертикального выравнивания

Answer 3

Я не вижу способ, но удаление всего стиля от входа, окружив его в DIV и делая его похожим нужный вход (граница, тень и т. д.), также используйте js, чтобы он вызывал щелчок на входе при нажатии в любом месте в обертке div.