Question

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

当我按Ctrl +时缩小Firefox 3.5.2时，列被包裹（demo）。

如何防止这种情况？

<!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>

Answer 1

尝试切换到不同的box model，如下所示：

#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
}

Answer 2

的Dmitri，

当缩放后浏览器计算div的新宽度时，它不会减少与单个960px成比例的两个478px + 4px的边框元素。所以你最终得到了这个：

您原来的风格：

#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内容太宽。看＆amp;测量这只是将背景颜色应用于#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;，在这种情况下你会再次出现这个问题[编辑：或者你可以，因为克里斯表示，将宽度设置为100％]。因此，只需重新计算#left，＃right的宽度，以便它们适合。

我的理解是，在父元素和子元素的宽度之间留一点喘息的空间，无论如何都可以避免这种问题。

Answer 3

我遇到了上述相同的问题。之后，无可救药地在互联网上闲逛几分钟，我发现显然这是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-border/）

Answer 4

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

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

Answer 5

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

您应该在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％。

我希望这有帮助！

EDITED ：

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

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

我希望我能帮到你。

Answer 6

我也正在努力解决这个问题。我有一个标签导航，每个标签上有固定宽度，右边距都是容器div的宽度。

我实际上发现了一个新的解决方案，它看起来效果很好。标签导航当然包含在ul标签中。我在这个ul标签上设置了一个比容器div大约6px的宽度。例如，容器div的宽度为952px，然后ul标签的宽度为958px。由于导航中的li标签浮动到左侧并且具有固定的宽度，因此它们不会超过952px，但是ul元素具有一些呼吸空间，这似乎是挤压这个bug所必需的。我已经尝试在Firefox和IE7 / 8中进行缩小，并且标签保持不变。

希望这可以帮助别人节省几分钟/小时！

Answer 7

好的，当你有一个固定高度的div时，为了防止放大一切，请将overflow:hidden添加到它的css中。这对我来说很有把戏，现在每个浏览器都可以疯狂变焦。：）

Answer 8

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

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

Answer 9

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

如何减少firefox缩放时浮动布局包装

9 个答案: