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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1274151/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:57:32  来源:igfitidea点击:

How to prevent the floating layout wrapping when firefox zoom is reduced

cssfirefoxzoomcss-floatword-wrap

提问by Dmitri Zhuchkov

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.

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

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

当我通过按 Ctrl+- 来缩小 Firefox 3.5.2 时,列被包裹(演示)。

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>

回答by ЯegDwight

Try switching to a different box modelas 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
}

回答by aaron b11

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:

当浏览器在您缩放后计算 div 的新宽度时,它不会将两个 478px+4px 的边框元素按单个 960px 的比例缩小。所以你最终得到这个:

Your original styles:

你的原创风格:

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

Everything fits nicely.

一切都很好。

Zoom reduced (ctrl-)

缩放缩小 (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.

内容对于#wrap 来说太宽了。要查看和测量它,只需将背景颜色应用于 #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.

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

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

移除样式 div {float:left} 并将 float:left 添加到 #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.

如果你想让 #wrap 居中,那么你需要再次声明一个宽度并添加 margin:0 auto;,在这种情况下你会再次遇到这个问题[编辑:或者你可以,正如克里斯指出的那样,将宽度设置为 100%]。因此,只需重新计算#left、#right 的宽度,以便它们适合。

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.

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

回答by stiopa

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

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

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

回答by detj

I encountered the same issue described above. After, hopelessly wandering around the internet for a few minutes, I found out that apparently it's a bug in Firefox 3.5.xand IE 7/8. The bug is still present as of this writing.

我遇到了上述相同的问题。之后,绝望地游荡在网上找了几分钟,我发现,显然这是一个错误Firefox 3.5.xIE 7/8。在撰写本文时,该错误仍然存​​在。

To see more about the bug go here: http://markasunread.com/?p=61(formerly http://markasunread.com/2009/06/zoom-bug-in-ie78-and-firefox-caused-by-border/)

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

回答by dfw

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.

我也在与这个错误搏斗。我有一个选项卡导航,每个选项卡上都有固定宽度,右边距全部是容器 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.

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

Hope this helps someone save a few minutes/hours!

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

回答by Brandon Wang

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:

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

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

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

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

这将使浏览器为#right 占用尽可能多的空间,尽可能多地在#wrap div 中占用。一定要为环绕设置一个宽度,否则它将占据窗口的 100%。

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.

我希望我有所帮助。

回答by Ed Peixoto

Ok guys, when you have a div with fixed height, to prevent zoom from breaking up everything, add overflow:hiddento it's css. That did the trick for me and now every browser can go zoom crazy. :)

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

回答by Balram Singh

Best Solution to fix floating bug in every case is use table layout using tds. That will never loose floating.

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

回答by ChrisBenyamin

The problem is caused by the width of your #wrap.

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

I've set the width to 100% and it doesn't break anymore in Firefox while zooming out with CTRL -.

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