Входное дополнение, вырезающее текст в firefox

В firefox, когда я использую элемент ввода формы управления бутстрапом, если я вставляю элемент ввода, он вырезает текст, заполняя его внутрь, а не вокруг текста. По-видимому, этот эффект имеет только эффект firefox. Этот jsfiddle демонстрирует проблему:

http://jsfiddle.net/v76xB/

Вход формы html:

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username">

CSS

.join-form {
    padding: 24px; /*comment this out to see effect of padding */
    margin: 12px 0px;
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 300;
}

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

Ответ 1

Класс управления формой Bootstrap по умолчанию имеет фиксированную высоту. Просто добавьте height: auto; в свой селектор .join-form (чтобы сохранить гибкость) и измените дополнение, чтобы получить исходный эффект, например padding: 14px 20px;

Смотрите здесь: http://jsfiddle.net/x78Bh/

Ответ 2

Добавьте свойство высоты, затем примените прокладку, как показано ниже. Теперь вы можете видеть, как и firefox, и хром будут вести себя одинаково.

.join-form {
padding: 20px; /*comment this out to see effect of padding */
margin: 12px 0px;
font-size: 16px;
letter-spacing: 0px;
font-weight: 300;
height:60px;
}

DEMO