调整浏览器大小时可以避免浮动元素移动吗？

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

基本思想是，使用取决于大小的单独样式表，您基本上可以根据用户的视口向用户显示不同的布局。 调整浏览器大小的用户也将能够动态地看到新布局。