10

在 Firefox（和大多数其他浏览器）上缩小时，右侧栏和顶部菜单的布局会中断。侧边栏跳到页面底部。要复制此问题，请访问该站点并：

  1. 在浏览器视图菜单下找到Zoom Out并单击几次。
  2. 注意它如何影响菜单和侧边栏。

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

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

4

4 回答 4

1

AFAIK，桌面浏览器不使用亚像素分辨率进行布局（WebKit 目前确实有一个未决的实现，但没有关于其他浏览器引擎的消息）。这就是为什么在 CSS 中调整框大小时不能使用像素的小数部分的原因。缩放仅通过一个常见的缩放因子缩放 CSS 属性，并对余数进行四舍五入（我猜它会降低值），以便布局引擎可以使用整数而不是浮点数。

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

不要将这与 CSS3 缩放相混淆，后者确实允许您任意缩放（并且确实会导致边缘不与屏幕像素对齐），因为这不会以任何方式影响布局。

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

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }
于 2012-11-25T16:30:55.743 回答
0

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

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

Safari问题的思考过程1：

如果顶部菜单中的“更多”菜单宽度不同，请尝试设置ul#secondary-menu为position:relative;z-index:11;. 然后，您可以通过在 other 的下方扫一扫，向 的li.mmore子级添加 padding-left 以ul#mega补偿不同缩放时不同的浏览器宽度评估，可以这么说。然后，为了加宽彩色线，将声明从子级转移到自身并相应地调整高度。liliborder-bottomali.mmoreli.mmore

于 2012-11-25T16:30:22.030 回答
0

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

的宽度main-content是 956px, left-area: 634px, sidebar: 322px。

634 + 322 = 956。

放大时，值是

633 + 321 = 954 > 953

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

于 2012-11-25T16:41:01.567 回答
0

在 head 标签中尝试给出如下内容：

<meta name="viewport" content="width=device-width, initial-scale=0.47, maximum-scale=1.0, user-scalable=1">
于 2019-04-23T18:30:24.290 回答