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

【问题标题】：Zooming out on Browser causes styling issues缩小浏览器会导致样式问题
【发布时间】：2012-11-13 03:45:43
【问题描述】：

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

在浏览器视图菜单下找到Zoom Out并点击几次。
注意它对菜单和侧边栏的影响。

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

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

【问题讨论】：

chrome 中也有这种情况。
在 Safari 中也是如此（缩小两次时）。
IE 10（至少缩小一次）

标签： html css browser zooming stylesheet

【解决方案1】：

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

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

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

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

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

【讨论】：

有趣的回应。问题是，为什么其他网站没有同样的问题？我检查了他们的来源，并不是所有的网站都使用百分比作为他们的 div。一定有他们在做正确的事情......？
在任何地方都使用像素的分数吗？
无法最终回答这个问题，因为有很多可能性，例如在相邻列之间留出边距，以避免将容器宽度相加到父级宽度之上。基本上，请注意浮点错误会在对数字求和时产生过冲，这会导致您的案例崩溃。例如，在列之间留出 2 像素的间隙。
@KrofDrakula 您能否使用此解决方案（带有示例代码）更新您的答案，以便我理解。很抱歉造成混乱。
阅读我关于 CSS 单元的 Script Junkie 文章：msdn.microsoft.com/en-us/magazine/jj687762.aspx 就可变宽度而言，考虑使用 max-width 将其限制为最大宽度。这个问题没有通用的解决方案，而是需要在设计中构建。

【解决方案2】：

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

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

634 + 322 = 956。

当你放大时，值是

633 + 321 = 954 > 953

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

【讨论】：

我在这里可能不正确，但据我所知，大多数使用多列的网站都将其尺寸设置为硬编码像素......？虽然我完全理解您在回答中提出的逻辑，但我质疑其主要原因是否是使用硬编码像素，更重要的是，如果唯一的解决方案是使用百分比。

【解决方案3】：

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

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

Safari 问题的思考过程 1：

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

【讨论】：

啊，我只注意到“更多”菜单项...好的，设置位置：绝对和右：0 到 div#sidebar 也可以。不过，仅在 Chrome 上测试过
@moonDogDog 您指的是哪个 div（即包装两个 ul）？在 Firebug 中尝试过，但对我没有用，但我可能做错了......
为了确认，对于“div#second-menu”，您添加了“position:relative”，然后为“ul#mega”添加了“position:absolute”和“right:0”。最后对于 'div#sidebar'，你添加了 'position:absolute' 和 'right:0'？
是的。我目前使用的是 Firefox 14 并已更新到 17，它按预期工作。应用上述样式后，您究竟看到了什么？
@moonDogDog 我刚刚测试了这个并且它有效。只有一个问题：在 Safari 上，当您缩小时，更多菜单按钮和其余内容之间会添加一个空格。 Firefox 上没有添加空格。你有解决这个问题吗？您也可以在 Safari 以外的其他浏览器中复制它。

【解决方案4】：

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

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

【讨论】：