Слишком короткие поля формы бутстрапа Twitter

Я знаю, что эта тема "звучит" так же, как и другие, которые есть, но я просмотрел все существующие потоки (ну "в любом случае" ), и у меня все еще есть проблема, я мог бы использовать помощь...

Проблема не слишком отличается от того, что другие описали:

  • Некоторые элементы FORM не отображают полную вертикальную высоту
  • Наиболее примечательным среди них является тип INPUT, который выглядит как анемичный размер при сидении рядом с кнопкой или классом "add-on"
  • Совсем недавно я заметил еще более серьезную проблему... радиокнопки становятся "радиодостолами", поскольку они настолько малы, что они едва заметны.

Теперь многие люди решили свою проблему, убедившись, что они правильно указали DOCTYPE в верхней части своего HTML-документа. Я тоже обнаружил, что эта простая настройка сделала трюк в моем статичном макете HTML. К сожалению, когда я переключился на Wordpress, проблема снова возникла, и все же я очень точно помещаю подпись HTML 5 DOCTYPE в самый верх выхода (я несколько раз проверял это с помощью "источника представления", поскольку я думал, что, возможно, я потерял свою ум).

Я включил быстрый снимок экрана, если это поможет пролить свет на это. Вы можете найти его здесь: http://www.flickr.com/photos/[email protected]/6957941282/. Обратите внимание на маленькие маленькие точки внизу, которые должны быть переключателями. Более очевидны поля INPUT, которые недостаточно высоки. О, а также для полноты, вот скриншот о том, как начинается исходный код HTML: http://www.flickr.com/photos/[email protected]/6957952802/.

Мне бы хотелось услышать от любого, у кого есть теория о том, почему это может происходить и какие-либо обходные пути, которые могут существовать (даже если источник решения неизвестен). Я попытался наложить CSS-атрибуты, такие как высота линии, высота, минимальная высота и т.д. И несколько других с нулевым эффектом.

Ответы

Ответ 1

Похоже, у вас две проблемы. Задача input type=text и кнопка radio. Не видя кода, кажется, что проблема с вашим текстовым полем связана с DOCTYPE, и проблема с вашим переключателем связана с переопределением стилей CSS (может подтвердить, что вы публикуете вывод инспектора для переключателей).

Если ваши переменные отображаются как правильные значения (например, высота 18px), то они являются наиболее определенно проблемой DOCTYPE.

Из этой статьи в List Apart:

Вы сделали все правильно, но ваш сайт не выглядит или работает как он должен быть в последних браузерах.

Вы опубликовали действительные XHTML и CSS. Вы использовали стандарт W3C Document Object Model (DOM) для управления динамическими элементами страницы. Все же, в браузерах, предназначенных для поддержки этих самых стандартов, ваш сайт терпит неудачу. Вероятно, виноват ошибочный DOCTYPE.

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

Здесь рекомендуется список DOCTYPE в соответствии с W3C:

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Ответ 2

Если кому-то интересно, вот что я добавил, чтобы исправить проблему:

input, input[type="text"], input[type="radio"], isindex, .uneditable-input {
    padding: 4px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #CCC;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #CCC;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #CCC; 
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: #CCC;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.input-append .add-on, .input-append .btn {
    margin-left: -6px;
}

input[type=checkbox] {
        -webkit-appearance: checkbox;
}