Подозреваю, что проблема, в том, что у вас не определен font-family в стилях и разные браузеры по умолчанию используют разные шрифты, вполне может быть, что данного символа нет в наборе шрифтов используемых по умолчанию.
input inline-block элемент, а значит наследует и поведение inline элементов. У вас между input элементами имеются пробелы, они учитывают и выводится отступ на ширину пробела. Почему себя так ведет последний input, а не второй скажем когда их 3, я не совсем понимаю. Но если в верстке все input начинать с новой строки всё будет ок. У вас сейчас все в одну строчку написано.
У вас же глядя на ваш пример получается много таблиц по одной ячейки. Если верно использовать display: table|table-cell и т.д. то всё будет работать так как вы говорите. Либо вы не совсем ясно описали проблему
1.) Ответ дан в другом вашем вопросе При наведении на ссылку картинка меняется с задержкой. Как исправить?
2.) Сделать блок сразу с формой, с помощью отрицательного left на нужную ширину спрятать форму так, что бы была видна только кнопка. По клику с помощью jquery, менять left. (Это один из вариантов самый простой, если нужно плавно, то воспользоваться методом animate)