jQuery Mobile Docs表示，如果我們將包含data-role="fieldcontain"的div中的表單元素進行包裝，則會應用適當的樣式，如水平線在底部。爲什麼此頁面上的data-role =「fieldcontain」未設置樣式？

我花了幾個小時試圖弄清楚爲什麼這不起作用，所以我只是想知道這個功能是從1.0最終刪除還是這個錯誤？我可以發誓，這是幾天前的工作。

作爲一個例子，我準備了這個簡單的HTML頁面，並通過CDN提供了默認腳本：http://jsfiddle.net/eQe5A/。

有人可以澄清這個問題。

感謝， Klikerko

編輯：

做更多的研究後，我發現，Safari和Opera都只能在臺式機瀏覽器，將使jQuery Mobile的頁面作爲手機瀏覽器會。上面的問題與瀏覽器大小小於450px時應用於表單元素的特殊風格有關。這些樣式將在表單元素下面添加水平線分隔線，並且如果寬度小於450px，則會將標籤移動到字段上方，並且如果其高於450px，則移除水平線和場地旁邊的標籤。如上所述，只有Safari和Opera桌面瀏覽器才能正確呈現，因此我猜如果您在本地機器上測試，請使用這兩種瀏覽器。

謝謝大家回覆！

來源

2012-01-19 Klikerko

感謝您張貼的jsfiddle。 – Jasper

如果您查看您的jsfiddle在移動設備上（我使用的是iPhone 4的iOS 5）的造型出現

enter image description here

來源

2012-01-19 17:41:09

我可以確認這些行出現在我的Android 2.3設備上。 – Jasper

感謝您測試這個傢伙。線路也在我的手機上（Windows手機）< - 我知道:) – Klikerko

我明白你的意思，即使在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只會改變頁面在桌面瀏覽器中的渲染方式。

來源

2012-01-19 17:24:52 Jasper

謝謝你回覆賈斯珀。我想我會離開jQuery Mobile樣式，因爲所有移動設備都會呈現這些線條。 – Klikerko

不客氣。是的，添加我提供的CSS的唯一原因是如果你想強制這些行出現在桌面瀏覽器上。我認爲他們沒有在桌面瀏覽器上顯示的原因是因爲空間比移動瀏覽器的空間大得多，所以線路並不是必須的。 – Jasper

你是對的。看看我上面的編輯。我發現幾個瀏覽器可以正確渲染。 – Klikerko

爲什麼此頁面上的data-role =「fieldcontain」未設置樣式？

回答

UPDATE

相關問題