Почему данные-role = "fieldcontain" на этой странице не написаны?

Question

jQuery Mobile Docs говорит, что если мы обернем элемент формы в div, содержащий data-role="fieldcontain", будут применены соответствующие стили, как горизонтальная линия внизу.

Я потратил часы, пытаясь понять, почему это не работает, поэтому мне просто интересно, эта функция удалена из 1.0 Final или эта ошибка? Я мог бы поклясться, что это работало всего несколько дней назад.

В качестве примера я подготовил эту простую html-страницу со сценариями по умолчанию, поставляемыми через CDN: http://jsfiddle.net/eQe5A/.

Может кто-то пролить свет на этот вопрос.

Спасибо, Klikerko

EDIT:

После выполнения дополнительных исследований я обнаружил, что Safari и Opera только настольный браузер, который сделает JQuery Mobile страницы в мобильном браузере будет. Мой вопрос выше связан со специальным стилем, применяемым для формирования элементов, когда размер браузера меньше 450 пикселей. Эти стили добавили бы горизонтальный разделитель линий под элементом формы и переместили бы метку над полем, если ширина меньше 450 пикселей, и удалите горизонтальную линию и поместите метку рядом с полем, если она выше 450 пикселей. Как упоминалось выше, браузеры браузера Safari и Opera будут отображаться правильно, поэтому я предполагаю, что если вы тестируете на локальной машине, используйте эти два браузера.

Спасибо всем, кто ответил!

Answer 1

При просмотре вы jsFiddle на мобильном устройстве (я использую iPhone 4 IOS 5) моделирование появляется

Answer 2

Я вижу, что вы имеете в виду, даже в документации для jQuery Mobile 1.0 в разделе Поле Контейнера указано, что на нижней части контейнера должна быть линия, но нет (http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html).

Если вы проверяете правила CSS для .ui-field-contain класса вы можете повторно добавить эти стили с помощью CSS:

.ui-field-contain { 
    border-bottom-width : 1px !important; 
    padding-bottom  : 1.5em !important; 
} 

Это должно сделать это, проблема в том, что JQuery Mobile 1.0 CSS является перезаписью border-bottom-width свойства до 0 за .ui-field-contain элементов. Я также добавил некоторые дополнения, чтобы дать линиям немного пространства от входов.

Вот демо: http://jsfiddle.net/eQe5A/1/

UPDATE

После просмотра ответ Филл, я подтвердил, что стиль появляется при просмотре страницы на мобильном устройстве (проверено с Android 2.3 устройства).

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