為什么display:block;width:auto;我的文本輸入不像div那樣填充容器寬度？我的印象是div只是具有自動寬度的塊元素。在以下代碼中，div和輸入的尺寸不應該相同嗎？如何獲取輸入以填充寬度？100％的寬度無效，因為輸入具有填充和邊框（導致最終寬度為1像素+ 5像素+ 100％+ 5像素+ 1像素）。固定寬度不是一個選擇，我正在尋找更靈活的方法。我希望直接找到解決方法。這似乎是CSS的怪癖，以后理解它可能會很有用。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>width:auto</title> <style> div, input { border: 1px solid red; height: 5px; padding: 5px; } input, form { display: block; width: auto; } </style> </head> <body> <div></div> <form> <input type="text" name="foo" /> </form> </body></html>我應該指出，我已經可以使用包裝方法來做到這一點。除了頁面語義和CSS選擇器關系的這種混亂之外，我還試圖了解問題的性質以及是否可以通過更改INPUT本身的性質來解決。好的，這真是奇怪！我發現解決方案是簡單地使用添加max-width:100%到輸入中width:100%;padding:5px;。但是，這引發了更多的問題（我將在另一個問題中提出），但是寬度似乎使用普通的CSS盒子模型，而max-width使用Internet Explorer邊框模型。真奇怪好的，最后一個似乎是Firefox 3中的錯誤。InternetExplorer 8和Safari 4將最大寬度限制為100％+填充+邊框，這是規范所說的。終于，Internet Explorer正確了。天哪，這太棒了！在這個過程中，在著名的大師Dean Edwards和Erik Arvidsson的大力幫助下，我設法組合了三個單獨的解決方案，以在具有任意填充和邊框的元素上實現真正的跨瀏覽器100％的寬度。請參閱下面的答案。此解決方案不需要任何額外的HTML標記，只需一個類（或選擇器）和舊版Internet Explorer的可選行為即可。
3 回答
- 3 回答
- 0 關注
- 807 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消