輸入表現異常？

我有很多麻煩把我的問題轉化爲文字，如果有人能夠「總結得更好」，我將非常感激。無論如何，我正在設計一個表單來收集信息，因爲它是針對移動設備的，我希望字段能夠伸展到100％，填滿屏幕。使用文本區域，在所有移動操作系統上都可以正常工作，但是，通過使用標準，iPhone上的佈局已損壞，請注意，Android上不會出現這種情況。我相信這是Safari的一個bug，但它可以在桌面Safari中使用，所以可能與iOS渲染有關？輸入表現異常？

Standard expected behaviour, and in browsers 標準的預期行爲。

iOS Behaviour iOS的行爲

注：網站的實時預覽可在http://www.draganmarjanovic.com 但是可以發現，這僅僅是出現在的< 720像素的分辨率。

相同的CSS代碼用於輸入和文本區域。 - 乾杯

來源

2013-12-09 Dragan Marjanovic

'box-sizing：border-box;' – MLeFevre

@MLeFevre這可以工作，但爲什麼文本區域和輸入的響應方式不同呢？ –

我相信這是由於瀏覽器如何呈現表單標籤，每個瀏覽器呈現稍微不同。 –

textarea和input上的填充在默認情況下是不同的（用戶代理樣式表），並且您沒有爲它們給出重置值。嘗試設置padding:0;他們兩個，它應該工作。

爲什麼它在你試圖使用box-sizing:border-box;時工作@MLeFevre告訴你，你問？因爲此屬性的作用是使padding計爲width而不是它的附加（這是我們在CSS3之前的正常瀏覽器行爲）。它的寬度也與border相同。因此，無論您設置的是什麼填充，默認padding都不是零，因爲寬度將爲100％。

來源

2013-12-09 16:55:51 jaicab

輸入表現異常？

回答

相關問題