調整瀏覽器大小時可以避免浮動元素移動嗎？

Question

我是編碼世界的新手以及 CSS 並且注意到當我調整瀏覽器大小時，我所有的浮動元素都會向右移動，並且用戶被迫水平滾動以查看菜單。

首先，是否需要防止浮動元素不改變其 position？

其次，如果我應該阻止它，有沒有辦法可以避免這種情況？

Answer 1

浮動是一個痛苦的屁股。 主要是因為一個瀏覽器拒絕遵循通用的 web 標准。 是的，那個。

有一百萬零一個技巧可以避免這些問題。 我告訴我的團隊遵循以下步驟：

1. 謹慎使用絕對定位的元素。 如果您 position 基於另一個元素，則事物可以“自動調整”，但當事物在數學上粘在一個位置時就不會那么多了。 它們有自己的位置，只是不是在頁面上的每個元素上。
2. 考慮“重置”或基於網格的 CSS 布局。 我個人更喜歡960 Grids他們消除了各種不同瀏覽器的猜測。 IE會推出你的填充嗎？ Firefox 的 IE 特定填充是否過多或過少？ 使用重置和/或網格，這沒什么大不了的。
3. 在計算百分比時（我個人非常喜歡），請記住瀏覽器通常不會使用 1 + 1 = 2 的數學運算。也就是說，如果您有 1000 像素空間並且並排執行兩個 50% 的列，那么很有可能非常好，一個人會把自己推到另一個人之下。 為什么？ 因為浮動、邊距、邊框等加起來，並且在不同的瀏覽器中都不同。 所以，在你設計的時候認為.9 +.9 = 2。 它一直有效嗎？ 沒有。 但這是一個開始。
4. 測試，測試，測試。 browsershots、Adobe Browser Labs 等是您的朋友。 經常使用它們以確保您提供在所有平台上看起來一致的高質量代碼。
5. 把事情簡單化。 您可能正在處理一個項目，該項目規定了 100 個不同的樣式表，涵蓋了每個瀏覽器的每個版本。 我們中的大多數人都在使用真實世界的預算從事真實世界的項目……這意味着您必須快速有效地進行部署。 使用符合 w3 標准的優質代碼和質量 CSS，您可以完全避免黑客攻擊。

Answer 2

我建議您確定是否要支持不同的分辨率，具體取決於您的目標受眾。 元素四處移動不一定是壞事，根據視口大小提前計划您希望站點如何布局可能很重要。

如果您找不到適合您需要的固定寬度的“一個布局來統治所有這些”，請查看CSS 媒體查詢。 有關它們的更實用的文章，請嘗試A List Apart

基本思想是，使用取決於大小的單獨樣式表，您基本上可以根據用戶的視口向用戶顯示不同的布局。 調整瀏覽器大小的用戶也將能夠動態地看到新布局。