Firefox Float Misbehavior

Question

我遇到了一個浮動佈局問題，我正在重新開發一個網站 - 請看here。預期的佈局是

1. 空填充區域向左（leftGap）
2. 與其相鄰（菜單欄）的垂直菜單欄
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); 
} 

這工作得很好的鉻，歌劇，IE7，8，9 & 10（是的！甚至IE）。然而，在Firefox bodyBox堅持環繞並放置在menuBar好像沒有「足夠的空間」來容納我分配的寬度（在任何情況下都不是這種情況）。

我在Firebug中玩過bodyBox，但無濟於事。在這裏和其他論壇上有很多討論Firefox中異常浮動行爲的主題，但我沒有看到任何內容似乎適用或幫助了這裏。

我非常感謝任何幫助確定此行爲的根本原因。 （我應該提及的是我使用了box-sizing：border-box，所以它不太可能影響我忽略的margin/padding問題）。

Answer 1

邊界框，似乎這樣的伎倆：

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