Ошибка ввода текста с помощью Twitter Bootstrap

Я пытаюсь использовать загрузку Twitter для нескольких страниц. У меня возникли проблемы с получением текстовых полей для рендеринга, как в http://twitter.github.com/bootstrap/

Мой HTML выглядит как

<div class="clearfix">
    <label for="unit">unit</label>
    <div class="input">
       <input class="xlarge" id="unit" name="unit" type="text" value="" />
    </div>
</div>

Кажется, что все соответствующие классы CSS, которые я вижу на демонстрационной странице. Тем не менее, поля ввода текста визуализируются с небольшой областью ввода, поэтому курсор и текст перекрываются с нижней границей области ввода. Это с последним хром на win7.

enter image description here

Ответы

Ответ 1

Это поведение также срабатывает, когда неверный тип doctype. В моем случае <!DOCTYPE> (неверный) был зафиксирован на <!DOCTYPE HTML>, и проблема исчезла.

Ответ 2

http://twitter.github.com/bootstrap/scaffolding.html

Требуется HTML5 doctype В Bootstrap используются HTML-элементы и свойства CSS, которые требуют использования документа типа HTML5. Не забудьте включить его в начале каждой загруженной страницы в вашем проекте.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

Ответ 3

Такое поведение наблюдается, когда в документе отсутствуют теги <html> на самом внешнем уровне. После того, как я установил свой шаблон в процессе очистки, он выглядит так, как должен. Спасибо блокнот ++.

Ответ 4

У меня была та же проблема, но в моем случае это было вызвано наличием непоследовательной текстовой кодировки между файлами. Некоторые файлы были закодированы в UTF-8 без спецификации (байтовый порядок байтов), а другие файлы были закодированы в UTF-8 с включенной спецификацией. Я переключил все файлы на UTF-8 без спецификации и работал правильно.

Ответ 5

замените class="x-large" на: class="input-block-level"

Ответ 6

В моем случае:
- У меня был входной текст в форме
- Он работал в Firefox и не работал в Chrome

Я исправил это, переопределив высоту строки в bootstrap css. Сначала это было так:

line-height: inherit;

и когда я изменил его в моем css (поэтому он переопределяет загрузку css):

line-height: normal;

Это сработало!

Для людей, которые видят это и не знают, что я говорю, нажмите f12 и перейдите в текстовое поле.
Теперь на вкладке стилей u увидите:

input, button, select, textarea {
   font-family: inherit;
   font-size: inherit;
   font-height: inherit;
}

который вы хотите переопределить.

Ответ 7

Спасибо всем, что мне помогает.
Я также сталкиваюсь с этой проблемой, чтобы помочь другому пользователю поделиться своим путешествием, как я его решаю. Проблема выглядит так: enter image description here

Эта проблема возникает в Firefox, который выглядит как хром.

Как я нашел решение:

  • Я знаю, что вы думаете, что это проблема с оптимизацией css. Или за ним нет надлежащего CSS.
  • Я использую bootstrap, тогда возникает вторая мысль, что в поле ввода нет подходящего места для классов.
  • Когда я пришел к этому вопросу и начал читать ответ, они предположили, что проблема с <!DOCTYPE html> я не верю, но я начал искать эту страницу.
  • Я также проверяю с помощью View Source в Firefox, но есть, что <!DOCTYPE html>
  • Вдруг я смотрю на hbb firebug, и на самом деле нет DOCTYPE, пока на всех остальных страницах он появится.

Теперь я думаю, почему это произошло, причина этого.
Затем я просматриваю страницы jsp. Это проблема в моем случае, кто-то включает другую страницу jsp перед телом.

Надеемся, что это поможет.

Ответ 8

Мой файл был создан в Windows, и у меня была аналогичная проблема, т.е. высота была слишком мала, поэтому сокращались. В моем файле есть PHP, как первые строки, за которым следует требуемый html. Прочитав все комментарии, я перевел мой  (2 строки) вверху впереди PHP, а высота увеличилась... поэтому проблема решена. Похоже, что DOCTYPE должен начинаться еще до PHP.