Проблема с отображением ввода текста с помощью Twitter Bootstrap
Я пытаюсь использовать загрузочную программу Twitter для нескольких страниц. У меня проблемы с отображением текстовых полей, как на http://twitter.github.com/bootstrap/
Мой HTML-код выглядит как
Это похоже на все соответствующие классы CSS, которые Я вижу на демонстрационной странице. Однако мои текстовые поля ввода отображаются со слишком маленькой областью ввода по вертикали, поэтому курсор и текст перекрываются с нижней границей области ввода. Это с последней версией хрома на win7.
2 ответа
http://twitter.github.com/bootstrap/scaffolding.html
Требуется тип документа HTML5 Bootstrap использует элементы HTML и свойства CSS, для которых требуется тип документа HTML5. , Не забудьте включить его в начале каждой загруженной страницы вашего проекта.
<!DOCTYPE html>
<html lang="en">
...
</html>
В моем случае:
- у меня был введенный текст в форме
- Он работал в Firefox и не работал в Chrome
Я исправил это с помощью переопределение высоты строки в начальной загрузке css. Сначала это было так:
line-height: inherit;
, и когда я изменил его в моем CSS (так что он переопределяет загрузочный CSS):
line-height: normal;
Это сработало!
Для людей, которые видят это и не знают, о чем я говорю, нажмите f12 и перейдите в текстовое поле.
Теперь на вкладке стилей вы увидите:
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
font-height: inherit;
}
- это тот, который вы хотите переопределить.