Css 当firefox缩放减少时，如何防止浮动布局换行_Css_Firefox_Zooming_Css Float_Word Wrap

Css 当firefox缩放减少时，如何防止浮动布局换行

css firefox

Css 当firefox缩放减少时，如何防止浮动布局换行,css,firefox,zooming,css-float,word-wrap,Css,Firefox,Zooming,Css Float,Word Wrap,给定以下HTML。它显示两列：#左，#右。两者都是固定宽度，有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/

给定以下HTML。它显示两列：

#左

，

#右

。两者都是固定宽度，有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>


试验
div{float:left}
#包裹{宽度：960px}
#左，#右{宽度：478px；边框：1px实心}
左边
正确的

我不确定我是否完全理解您的情况。缩小缩放效果应该是缩小。你是说当你缩小这些列的时候，它会环绕你吗

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

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

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

已编辑（忽略以上内容）：

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

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

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

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

我希望这有帮助

编辑：

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

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

我希望我能帮上忙。

问题是由你的包裹宽度引起的

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

Dmitri

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

您的原创风格：

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

一切都很合身

缩小缩放（ctrl-

内容太宽，无法包装。要查看和测量这一点，只需将背景色应用于#wrap

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

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

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

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

尝试切换到其他元素，如下所示：

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

我遇到了上述相同的问题。在绝望地在互联网上徘徊了几分钟之后，我发现这显然是

Firefox3.5.x

和

IE7/8

中的一个bug。在撰写本文时，该bug仍然存在

要了解更多关于这个bug的信息，请访问这里：（以前）

我也在与这个bug搏斗。我有一个标签导航，每个标签上都有固定的宽度，还有一个右边距，所有这些都是容器div的宽度

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

希望这能帮助某人节省几分钟/小时

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

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

好了，伙计们，当你们有一个固定高度的div时，为了防止缩放破坏一切，在它的css中添加

overflow:hidden

。这对我来说是个好办法，现在每个浏览器都可以疯狂缩放了

在任何情况下修复浮动错误的最佳解决方案是使用tds使用表布局。

这永远不会失去浮动。

我用演示扩展了我的问题。左右浮动没有帮助。减小列的宽度有帮助，但这只是一个可用的选项吗？#right{width:auto；}有助于包装，但这不会使#right固定宽度。如果#right没有足够的内容，那么它将小于478px；是的，但是如果他们出于某种原因（比如使用960.gs网格系统）想将宽度设置为960px，或者如果他们想将内容居中，他们需要为容器设置宽度。这解决了我的问题。我把指南针混在了一起：有人能解释为什么会这样吗？我的网站上也有同样的问题。“新闻提要”和右侧边栏都是左右浮动的。右侧边栏有一个边框，类似于OP。当你在Firefox中缩小时，它会把右边的边栏放在底部

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

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