Как побороть разное поведение input в браузерах?

Question

[Михаил]

Имеется вот такой пример jsfiddle.net/a4qe35g5 в Chrom всё ок, в FF всё не ок. Не могу найти способ правильного отображения без применения JS. Возможно стоит отказаться от такой структуры html. Главное, что бы была подложка поверх которой будет input в который будет вводиться текст.

Answer 1

[Евгений Петров]

У меня везде одинаково. Текст, поверх которого выводится текст input. Что уже удивительно — почему стартовый текст не исчезает, и почему не использовать placeholder?

Решение с упрощением jsfiddle.net/tpecazgn

Comments

[Михаил]

Текст должен печататься поверх подложки не удаляя её. У меня и в ubuntu и в windows в разных браузерах по разному вот например скриншоты Chrome gyazo.com/dec6fcb9c0b0b92c5b8fb47cef262cfc FF gyazo.com/f0fc13f87bc5e63f6bf5e4848928dc28

[Евгений Петров]

@FFxSquall вы забыли про margin. А height и line-height для input лучше не трогайте.

Answer 2

[Юрий Лобанов]

input обязателен? Вот вариант, отображение гарантировано одинаковое
codepen.io/iiil/pen/IpxrA

В ff из примера выше какая-то лажа с курсором, которую сходу побороть не смог, потому вот еще такой вариант, но он предполагает лишние блоки.
codepen.io/iiil/pen/mEoer

Comments

[Михаил]

Да input обязателен