如何防止firefox缩放时浮动布局环绕

给定以下HTML。它显示两列：#left,#right。两者都是固定的宽度，并有1px的边界。宽度和边框等于上方容器的尺寸：#wrap。如何防止firefox缩放时浮动布局环绕

当我通过按Ctrl + - 列取得包装（demo）缩小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>

来源

2009-08-13 Dmitri Zhuchkov

我不知道我完全理解你的情况。缩小缩放实际上应该缩小。你是否说过，当你缩小列环绕？

你应该浮动使用该代码的这些div在你的CSS：

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

如果这不起作用，你可以尝试通过调整宽度，以弥补一些小的浏览器不兼容离开柱之间的小空间。

EDITED（忽略以上）：

看到，因为你已经给我提供了更多的信息，我要告诉你的是，浏览器集成了调整，并具有下列准确完美的像素大小时四舍五入是不最聪明的事情。

相反，你可以有一个DIV具有绝对的宽度和其他有一个自动的宽度，像这样：

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

这将有浏览器采取#right尽可能多的空间可以采取的可能在#wrap div中。一定要为包装设置一个宽度，否则会占用100％的窗口。

我希望这有助于！

EDITED：

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

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

我希望我能帮上忙。

来源

2009-08-13 19:44:48

我用演示扩展了我的问题。左右浮动不起作用。减少列的宽度有帮助，但它只有一个可用选项？ – 2009-08-13 20:07:24

我已经更新了上面的示例。 – 2009-08-14 02:18:18

#right {width：auto;}有助于包装，但这不会使#right固定宽度。如果#right没有足够的内容，那么它将小于478px; – 2009-08-17 10:52:26

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

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

来源

2009-08-13 21:09:55 ChrisBenyamin

是的，但如果他们想将宽度设置为960像素（出于某种原因（例如，使用960.gs网格系统），或者如果他们想要将内容居中），则需要为容器设置宽度。 – 2009-08-14 02:20:20

德米特里，

当浏览器caluclates你放大后您的div的新宽度，它并没有降低边界元素的两个478px + 4PX按比例单960像素。所以，你最终这个：

您的原始风格：

#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为中心，那么你就需要再次声明宽度并添加保证金：0汽车;，在这种情况下，你会再次[编辑有这样的问题：或你可以像克里斯特指出的那样将宽度设置为100％]。因此，只需重新计算#left，#right的宽度以使它们适合。

这是我的理解是，在父母和子女元素的宽度之间留出一点喘息空间是很好的，以避免这种问题。

来源

2009-08-13 21:13:15

尝试切换到不同的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 
}

来源

2009-08-13 21:20:29

这解决了我的问题。我使用了Compass混合版：http://compass-style.org/reference/compass/css3/box_sizing/ – jedmao 2013-04-09 21:17:30

任何人都可以解释它为什么会发生？我的网站上有同样的问题，[Goodwill Fire 18]（http://www.goodwillfire18.com/）。 “新闻提要”和右边栏都左右浮动。右边栏有一个边界，类似于OP的边框。在Firefox中缩小时，会将右侧边栏放在底部。 – Kayla 2014-05-16 20:25:18

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

来源

2010-03-25 12:20:45 detj

错误在Firefox 29.0.1上仍然存在 – Kayla 2014-05-16 20:27:38

我与这个错误太摔跤。我在每个选项卡上都有一个固定宽度的选项卡导航，右边距都是容器div的宽度。

我实际上发现了一个新的解决方案，这似乎很好。标签导航当然包裹在一个ul标签中。我在这个ul标签上设置了比容器div大6px左右的宽度。例如，容器div宽度为952px，然后ul标签宽度为958px。由于导航中的li标签浮动到左侧并具有固定宽度，因此它们不会超出952px，但是ul元素有一定的呼吸空间，这似乎是压缩此bug的必要条件。我试着在Firefox和IE7/8中缩小，标签保持原位。

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

来源

2010-11-24 03:36:48 dfw

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

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

来源

2011-03-23 12:32:48 stiopa

玉家伙，当你有固定的高度一个div，为防止变焦从分手的一切，加上overflow:hidden它的CSS。这对我来说伎俩，现在每个浏览器都可以变得疯狂。:)

来源

2011-12-15 20:01:01

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

来源

2014-05-28 10:13:23

如何防止firefox缩放时浮动布局环绕

回答

相关问题