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

Question

我是编码和CSS的新手，并注意到当我调整浏览器大小时，所有浮动元素都向右移动，用户被迫水平滚动以查看菜单。

首先是否需要防止浮动元素不改变位置？

其次，如果我应该阻止它，有没有办法可以避免这种情况？

Answer 1

漂浮物是​​一种痛苦的屁股。主要是因为一个浏览器拒绝遵循通用Web标准。是的，那个。

有一百万个技巧可以避免这些问题。我告诉我的团队遵循以下步骤：

1. 谨慎使用绝对定位的元素。如果你基于另一个元素进行定位，那么当事物以数学方式粘合到一个点时，事物可以“自动调整”但不是那么多。他们有自己的位置，而不是页面上的每个元素。
2. 考虑“重置”或基于网格的CSS布局。我个人更喜欢960 Grids他们从各种不同的浏览器中猜测出来。 IE会推出你的填充吗？使用Firefox的IE特定填充是太多还是太少？通过重置和/或网格，这不是一件大事。
3. 当做百分比（我个人非常喜欢）时，请记住浏览器通常不使用数学，其中1 + 1 = 2.也就是说，如果你有一个1000像素的空间并且你做了两个50％的列旁边一方面，很有可能会将自己推向另一方面。为什么？因为浮点数，边距，边框等加起来，并且在不同的浏览器中有所不同。所以，设计时认为.9 + .9 = 2。它一直有效吗？不。但这是一个开始。
4. 测试，测试，测试。像browserhots，Adobe Browser Labs等的东西是你的朋友。经常使用它们以确保您提供在所有平台上看起来一致的高质量代码。
5. 保持简单。您可能正在开发一个项目，该项目规定了100种不同的样式表，涵盖了每个浏览器的每个版本。我们大多数人都在使用实际预算来处理实际项目......这意味着您必须快速有效地部署。使用高质量的w3兼容代码和高质量的CSS，你可以完全避免黑客攻击。

Answer 2

我建议你弄清楚是否要支持不同的分辨率，具体取决于你的目标受众。移动的元素不一定是坏事，并且根据视口大小提前规划您的网站布局可能很重要。

如果您无法找到适合您需求的固定宽度“一个布局来统治所有”，请查看CSS media queries。有关它们的更实用的文章，请尝试A List Apart

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