Question

当缩小Firefox（以及大多数其他浏览器）时，右侧栏和顶层菜单的布局会中断。侧栏跳到页面底部。要复制此问题，请visit the site和：

在浏览器视图菜单下找到Zoom Out，然后点击几次。
注意它如何影响菜单和侧边栏。

到目前为止，我发现的唯一解决方案是使用几个像素减小侧边栏的宽度，并减小其中一个菜单列表项的宽度。此虚拟修复的问题在于，当以实际大小查看网站时，可以看到菜单在宽度上缺少几个像素。

当然，必须有一个更好的解决方案来解决这个问题。你知道吗？

Answer 1

AFAIK，桌面浏览器不使用子像素分辨率进行布局（WebKit目前有一个待实现的实现，但在其他浏览器引擎上没有字）。这就是为什么在CSS中调整框大小时不能使用像素的分数的原因。缩放只能通过一个常见的缩放因子来缩放CSS属性，然后对余数进行舍入（我猜测它将值置于底层），以便布局引擎可以使用整数而不是浮点数。

除了尝试选择在缩放级别之间均匀划分的像素值之外，没有硬解决方案。另一种方法是对容器使用基于百分比的宽度定义 - 这样，浏览器将为您正确地舍入数字，如果两个容器的公共宽度从不超过100％（您可能需要减去十分之一或由于四舍五入的百分之几，你应该很好地继续所有缩放级别。

这不要与CSS3缩放混淆，后者允许你任意缩放（实际上可能导致边缘不与屏幕像素对齐），因为这不会以任何方式影响布局。

编辑：示例：使用百分比调整列的大小

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }

Answer 2

对于顶部菜单，您可以尝试将div包裹两个ul设为position:relative，然后将ul#mega元素设置为position:absolute使用right:0的附加CSS声明。绝对定位似乎是解决这类问题的一种很好的跨浏览器方式。

对于侧边栏，您可以将position:absolute和right:0设置为div#sidebar。

Safari问题的思维过程1：

如果顶部菜单中的“更多”菜单宽度不同，请尝试将ul#secondary-menu设置为position:relative;z-index:11;。然后，您可以向li.mmore的{{1}}子项添加padding-left，以便通过将ul#mega扫到其他li下来补偿不同缩放比例下的不同浏览器宽度评估，可以这么说。然后，要扩大彩色线条，请将li border-bottom a个孩子的li.mmore声明转移到li.mmore本身并相应调整高度。

Answer 3

当您调整浏览器大小时，像素值必须四舍五入，这会导致sidebar和left-area没有足够空间并排放置的问题，你可以看到它落到了页面的底部。

main-content的宽度为956px，left-area：634px，sidebar：322px。

634 + 322 = 956。

放大时，值为

633 + 321 = 954> 953

任何硬编码的像素值都会出现这种舍入问题，请考虑使用百分比。

Answer 4

在头部标签中尝试给出以下内容：

<meta name="viewport" content="width=device-width, initial-scale=0.47, maximum-scale=1.0, user-scalable=1">

缩小浏览器会导致样式问题

4 个答案: