Почему data-role = "fieldcontain" на этой странице не стилизовано?

Question

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

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

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

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

Спасибо, Klikerko

РЕДАКТИРОВАТЬ:

После дополнительных исследований я обнаружил, что Safari и Opera являются только настольным браузером, который будет отображатьjQuery Мобильные страницы, как мобильный браузер.Мой вопрос выше связан со специальным стилем, применяемым к элементам формы, когда размер браузера меньше 450 пикселей.Эти стили добавили бы разделитель горизонтальной линии ниже элемента формы и переместили бы метку над полем, если ширина меньше 450px, и удалили горизонтальную линию и поместили метку рядом с полем, если она выше 450px.Как уже упоминалось выше, только браузеры 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 только изменяет способ отображения страницы в браузерах настольных компьютеров.