为什么此页面上的data-role =“fieldcontain”没有样式？

Question

jQuery Mobile Docs说如果我们在包含data-role="fieldcontain"的div中包装form元素，将会应用适当的样式，如底部的水平线。

我花了几个小时试图弄清楚为什么这不起作用所以我只是想知道这个功能是从1.0 Final中移除还是这个bug？我可以发誓这是几天前的工作。

作为一个例子，我准备了这个简单的html页面，其中包含通过CDN提供的默认脚本：http://jsfiddle.net/eQe5A/。

有人可以就这个问题说清楚。

谢谢， Klikerko

修改

经过更多研究后，我发现Safari和Opera只是桌面浏览器，可以像移动浏览器那样呈现jQuery Mobile页面。我上面的问题与浏览器大小小于450px时应用于表单元素的特殊样式有关。这些样式会在表单元素下面添加水平线分隔符，如果宽度小于450px，则会在字段上方移动标签;如果在450px以上，则删除水平线并在字段旁边放置标签。如上所述，只有Safari和Opera桌面浏览器可以正确呈现这一点，所以我想如果你在本地机器上测试那么使用这两个浏览器。

感谢所有回复的人！

Answer 1

我明白你的意思，即使在jQuery Mobile 1.0的文档中，Field Container部分指出容器底部应该有一行但没有（http://jquerymobile.com/demos/1.0/docs/forms/docs-forms.html）。

如果您检查.ui-field-contain类的CSS规则，可以使用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/

更新

在看到Phill的回答后，我确认在移动设备上查看页面时出现样式（使用Android 2.3设备测试）。

因此，上述CSS仅更改页面在桌面浏览器中的呈现方式。

Answer 2

如果您在移动设备上查看jsFiddle（我使用的是iPhone 4 iOS 5），则会出现样式