Firefox Float Misbehavior

Question

我遇到了一个我正在重新开发的网站的浮动布局问题 - 请看here。预期的布局是

1. 左边的空填充区域（leftGap）
2. 与其相邻的垂直菜单栏（menuBar）
3. 主要页面正文（bodyBox）

这是相关的CSS

#leftGap {width: 200px;float: left;min-height: 1em;}
#menuBar {width: 250px;float: left;min-height: 1em;}
#bodyBox {width:**???**px;float:left;clear:right;min-height:1em;
          padding:0.5em;padding-left:8em;padding-right: 8em;}

我在运行时使用JavaScript来调整 bodyBox 的大小以尽可能地利用可用的屏幕宽度

function resizeBodyBox()
{
 var w = $('body').innerWidth() - $('#leftGap').width() - 
         $('#menuBar').width() - $.scrollBarWidth() - 25;
 //25 - a  "don't be greedy" insurance against unexpected behavior
 $('#bodyBox').css('width',w);
}

这适用于Chrome，Opera，IE7,8,9＆amp; 10（是的！甚至是IE）。但是，在Firefox中， bodyBox 坚持包裹并将自己置于 menuBar 下，好像没有“足够的空间”来容纳我分配的宽度（这不是这种情况，无论如何）。

我在Firebug玩过bodyBox，但无济于事。在这里和其他论坛上有许多线程讨论Firefox中不寻常的浮动行为，但我读过的任何内容似乎都不适用或帮助。

我非常感谢帮助确定此行为的根本原因。 （我应该提一下，我使用box-sizing：border-box，因此不太可能将效果降低到我忽略的边距/填充问题。）

Answer 1

border-box似乎可以解决问题：

#bodyBox {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }