В firefox, когда я использую элемент ввода формы управления бутстрапом, если я вставляю элемент ввода, он вырезает текст, заполняя его внутрь, а не вокруг текста. По-видимому, этот эффект имеет только эффект firefox. Этот jsfiddle демонстрирует проблему:
Вход формы 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;
}
Это примерно так, как я могу получить для репликации этой ошибки. Я также надеюсь, что это просто причуда браузера, полностью связанная со мной, но я не могу проверить, насколько я работаю индивидуально и имею только одну машину.
Класс управления формой Bootstrap по умолчанию имеет фиксированную высоту. Просто добавьте height: auto; в свой селектор .join-form (чтобы сохранить гибкость) и измените дополнение, чтобы получить исходный эффект, например padding: 14px 20px;
Смотрите здесь: http://jsfiddle.net/x78Bh/
Добавьте свойство высоты, затем примените прокладку, как показано ниже. Теперь вы можете видеть, как и 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;
}