css - 减少Firefox缩放时如何防止浮动布局换行

Question

给定以下 HTML。它显示两列：#left, #right。两者都是固定宽度并具有 1px 边框。宽度和边框等于上容器的大小：#wrap.

当我按 Ctrl+- 缩小 Firefox 3.5.2 时，列会被包装（演示）。

如何防止这种情况？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test</title>
    <style type="text/css">
      div           {float:left}
      #wrap         {width:960px}
      #left, #right {width:478px;border:1px solid}
    </style>
  </head>
  <body>
    <div id="wrap">
      <div id="left">
        left
      </div>
      <div id="right">
        right
      </div>
    </div>
  </body>
</html>

score 13 · Accepted Answer

尝试切换到不同的盒子模型，如下所示：

#left, #right 
{ 
  width:480px;
  border:1px solid;
  box-sizing: border-box;

  /* and for older/other browsers: */
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box
}

score 8 · Accepted Answer

德米特里，

当浏览器在缩放后计算 div 的新宽度时，它并没有将两个 478px+4px 的边框元素按比例缩小到单个 960px。所以你最终得到了这个：

您的原始样式：

#wrap equals 960px wide
#left & #right, plus border equals 960px wide

一切都很好。

缩小缩放 (ctrl-)

#wrap equals (approx.) 872px wide.
#left, #right, plus border eqauls 876px wide.
(left and right reduce to approx 436px each, plus 4 px of border)

#wrap 的内容太宽。要查看和测量，只需将背景颜色应用于#wrap。

要修复，请从#wrap 中删除宽度。因为它是浮动的，它会收缩以适应内容。但是，您应该为浮动元素应用宽度，并且您的 div {float:left} 将其应用到#wrap。

删除样式 div {float:left} 并将 float:left 添加到#left、#right。

#left, #right {float:left;width:478px;border:1px solid}

如果您希望 #wrap 居中，则需要再次为其声明宽度并添加 margin:0 auto;，在这种情况下，您将再次遇到此问题 [编辑：或者您可以，如 chris 所示，将宽度设置为 100%]。因此，只需重新计算#left、#right 的宽度，以便它们适合。

我的理解是，在父元素和子元素的宽度之间留一点喘息的空间是避免此类问题的好方法。

score 2 · Accepted Answer

我有类似的问题。将#right 设置为负边距有效。例如：

#right{
    margin-right:-400px;
}

score 2 · Accepted Answer

我遇到了上述相同的问题。之后，绝望地在互联网上徘徊了几分钟，我发现这显然是Firefox 3.5.x和IE 7/8. 在撰写本文时，该错误仍然存在。

要查看有关该错误的更多信息，请访问此处：http ://markasunread.com/?p=61 （以前为http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by -边框/ )

score 1 · Accepted Answer

我不确定我是否完全理解你的情况。减小缩放实际上应该缩小。你是说当你缩小列环绕时？

您应该在 CSS 中使用以下代码浮动这些 div：

#container {width: 960px}
#left {float: left}
#right {float: right}

如果这不起作用，您可以尝试通过调整宽度来在列之间留一个小空间，以补偿一些小的浏览器差异。

已编辑（忽略以上）：

看到您向我提供了更多信息，我需要告诉您，浏览器在调整大小时会进行舍入，并且拥有这些精确的像素完美大小并不是最明智的做法。

相反，您可以让一个 div 具有绝对宽度，而另一个具有自动宽度，如下所示：

#container {width: 960px;}
#left {width: 478px;}
#right {width: auto;}

这将使浏览器为#right 占用尽可能多的空间，就像在#wrap div 中可能占用的一样多。一定要为换行设置一个宽度，否则它将占用 100% 的窗口。

我希望这有帮助！

编辑：

右侧非常接近您的固定宽度，因为您已经定义了容器的宽度，所以它只是容器宽度减去左侧的宽度。这只是为了确保在调整窗口大小时没有差异。

我知道它不会占用整个空间区域，但是，随着内容的添加，它将达到的最大值是容器 - 左侧宽度。你想申请背景吗？在这种情况下，将右侧背景设置为容器背景，然后将左侧设置为左侧背景（确保它覆盖了一半）。

我希望我有所帮助。

score 1 · Accepted Answer

好的，伙计们，当你有一个固定高度的 div 时，为了防止缩放破坏一切，添加overflow:hidden到它的 css 中。这对我有用，现在每个浏览器都可以疯狂缩放。:)

score 1 · Accepted Answer

I was wrestling with this bug too. I had a tab navigation with fixed widths on each tab and a right margin all totaling the width of the container div.

I actually discovered a new solution, which seems to work great. The tab navigation is of course wrapped in a ul tag. I set a width on this ul tag of about 6px greater than the container div. So for example, container div is 952px wide, then ul tag is 958px wide. Since the li tags in the navigation are floated to the left and have fixed widths, they will not go beyond 952px, however the ul element has some breathing room, which appears to be necessary to squash this bug. I've tried zooming out in Firefox and IE7/8 and the tabs stay in place.

Hope this helps someone save a few minutes/hours!

score 0 · Accepted Answer

问题是由#wrap 的宽度引起的。

我已将宽度设置为 100%，并且在使用 CTRL - 缩小时它在 Firefox 中不再中断。

score 0 · Accepted Answer

在每种情况下修复浮动错误的最佳解决方案是使用 tds 使用表格布局。即永不松浮。

css - 减少Firefox缩放时如何防止浮动布局换行

9 回答 9

Related

Reference