Firefox缩放缩小时如何防止浮动布局换行

发布于 2024-08-01 14:05:13 字数 1000 浏览 6 评论 0原文

给定以下 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>

原文

Given the following HTML. It display two columns: #left, #right. Both are fixed width and have 1px borders. Width and borders equal the size of upper container: #wrap.

When I zoom out Firefox 3.5.2 by pressing Ctrl+- columns get wrapped (demo).

How to prevent this?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜嗑 2024-08-08 14:05:13

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

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

Try switching to a different box model as follows:

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

回复收藏 0 原文

情仇皆在手 2024-08-08 14:05:13

Dmitri，

当浏览器在缩放后计算 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 的宽度，使它们适合即可。

据我了解，在父元素和子元素的宽度之间留出一点喘息空间可以很好地避免此类问题。

Dmitri,

When the browser caluclates the new width of your divs after you zoom, it doesn't have reduce the two 478px+4px of border elements in proportion to the single 960px. So you end up with this:

Your original styles:

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

Everything fits nicely.

Zoom reduced (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)

Contents are too wide for #wrap. To see & measure this just apply a background color to #wrap.

To fix, remove width from #wrap. Because it is floated, it will shink to fit the contents. However, you should apply a width to floated elements and your div {float:left} applies it to #wrap.

Remove the style div {float:left} and add float:left to #left, #right.

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

If you want #wrap to be centered, then you'll need to declare a width for it again and add margin:0 auto;, in which case you'll have this problem again [edit: or you can, as chris indicated, set the width to 100%]. So simply recalculate the width of #left, #right so that they will fit.

It's my understanding that leaving a little breathing room between the width of parent and child elements is good to avoid this sort of problem anyway.

回复收藏 0 原文

何以笙箫默 2024-08-08 14:05:13

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

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

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

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

编辑（忽略上面）：

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

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

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

这将使浏览器为 #right 占用与 #wrap div 内可能占用的空间一样多的空间。请务必设置换行的宽度，否则它将占据窗口的 100%。

我希望这有帮助！

编辑：

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

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

我希望我有所帮助。

I'm not sure I fully understand your situation. Reducing the zoom should in effect zoom out. Are you saying that when you zoom out the columns wrap around?

You should float those divs using this code in your CSS:

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

If this does not work you can try leaving a small space between the columns by adjusting the width to compensate for some small browser discrepancies.

EDITED (ignore above):

Seeing as you have provided me with more information, I need to tell you that the browser incorporates rounding when resizing and having these exact pixel-perfect sizing isn't the smartest thing to do.

Instead, you can have one div have an absolute width and the other to have an automatic width like so:

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

This will have the browser take as much space for #right as can be possibly taken inside the #wrap div. Be sure to set a width for the wrap, otherwise it will take 100% of the window.

I hope this helps!

EDITED:

Right IS very close to your fixed width, because you defined the width of your container already, so it is simply the container width subtracted by the width of the left side. This is merely to ensure that there is no discrepancy when resizing the window.

I understand it will not take up the entire area of space, however, as content is added, the maximum it will go is container - left width. Are you trying to apply a background? In that case set the right side background as the container background and then the left side as the left side background (make sure it covers half of it).

I hope I've helped.

回复收藏 0 原文

痴骨ら 2024-08-08 14:05:13

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

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

I had similar problem. Setting #right to a negative margin worked. For example:

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

回复收藏 0 原文

凉宸 2024-08-08 14:05:13

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

回复收藏 0 原文

过气美图社 2024-08-08 14:05:13

我也在与这个错误作斗争。我有一个选项卡导航，每个选项卡上都有固定宽度，右侧边距总计为容器 div 的宽度。

我实际上发现了一个新的解决方案，看起来效果很好。选项卡导航当然包含在 ul 标签中。我在这个 ul 标签上设置的宽度比容器 div 大约大 6px。例如，容器 div 的宽度为 952px，那么 ul 标签的宽度为 958px。由于导航中的 li 标签向左浮动并具有固定宽度，因此它们不会超过 952px，但是 ul 元素有一些喘息空间，这似乎是消除此错误所必需的。我尝试在 Firefox 和 IE7/8 中缩小，选项卡保持在原位。

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

回复收藏 0 原文