Twitter Bootstrap высота текстового поля слишком мала?

68

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

Я использовал firebug для проверки области текста. Он говорит, что высота составляет 18 пикселей, что кажется мне невозможным... И то, что я получил, такое же, как я получил отсюда. Текстовая область из примера начальной загрузки. Это меня пугает... я получил

input, textarea, select, .uneditable-input {
  border: 1px solid #CCCCCC;
  border-radius: 3px 3px 3px 3px;
  color: #555555;
  display: inline-block;
  font-size: 13px;
  height: 18px;
  line-height: 18px;
  margin-bottom: 9px;
  padding: 4px;
}

Высота говорит, что это 18px, но это не... Может кто-нибудь помочь?!

  • 1
    Хорошо. Я нахожу, что это помогло. Но я был бы рад, если бы кто-нибудь смог мне это объяснить. Кажется довольно странным, что свойства css точно такие же, но результат такой разный ... Что часть! DOCTYPE имеет отношение к css ?!
  • 0
    DOCTYPE определяет, насколько снисходительным будет браузер при отображении страницы. Проверьте quirksmode.org/css/quirksmode.html для некоторых примеров.
Показать ещё 5 комментариев
Теги:

5 ответов

166
Лучший ответ

Добавление <!DOCTYPE HTML> должно исправить это. Здесь был задан один и тот же вопрос: Ошибка ввода текста с помощью бутстрапа Twitter

Поделиться
  • 0
    Да. Я также нашел похожий вопрос. Я разместил его в области комментариев выше. Я должен был закончить этот вопрос. Но я не понял, почему это решило проблему.
  • 0
    Посмотрите на этот stackoverflow.com/questions/414891/whats-up-doctype
Показать ещё 10 комментариев
7

Включение верхнего ответа не помогло

У меня уже был <!DOCTYPE html>, и это не было проблемой для меня. Я не знаю, в чем проблема, но Я исправил это в моем css:

input[type=text], input[type=password], input[type=email], input[type=tel] {
    height: 28px !important;
}

Это обходной путь, и я не уверен, что он имеет некоторые побочные эффекты.

Поделиться
3

Я не знаю, почему, если я открываю чистую новую страницу HTML5, она работает, но после добавления кода я не знаю, почему это происходит. Поэтому я просто открываю файл bootstrap.min.css и выполняет поиск: type="text", и там есть свойство height, и я изменяю его на min-height, потому что он должен работать.

Поделиться
2

Посмотрите мое решение здесь в аналогичном потоке.

В принципе, кодировка текстового файла вызывала все мои проблемы. Это проявилось в таких мельчайших различиях в браузерах, что я потратил впустую часы, играя с мышлением CSS, что было причиной.

Поделиться
  • 0
    Вы правы, ничего не делать с CSS. У меня была такая же проблема с одним из моих php файлов, кодируемых в utf8 вместо ascii.
2

Да общий height равен 28px, потому что добавление и граница также добавляют height к этому input следующим образом:

height 18px + 
4px padding-top + 
4px padding-bottom + 
1px border-top + 
1px border-bottom = 
Total 28px height
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню