CSS布局在Firefox中搞亂了，但在IE或Opera中卻沒有？

Question

出於某種原因，Firefox弄亂了以下網站布局，盡管它在IE和Opera中也能正常工作...

http://87.194.141.33/bivakas/shop

我曾嘗試使用Firebug查找丟失的div或類似內容，但可惜沒有成功。 如果有人願意花幾分鍾看一下為什么會發生這種情況，我將不勝感激。

謝謝！！

Answer 1

從標記和CSS的基本自動質量檢查開始...

……不，把它刮開。 首先不要濫用表格進行布局。

Answer 2

整個布局放在8 x 9的表格中，莫名其妙地包裹在2個div中（ID分別為“ header”和“ bvhead”）。

似乎問題是由於使用colspan和rowspan數學錯誤，行與行之間的列數與行數之間不匹配。 但是，經過幾分鍾的嘗試修復后，我放棄了它，因為它很糟糕。

建議：

該網站存在許多錯誤-不同的瀏覽器以不同的方式清除這些錯誤。 驗證HTML並修復錯誤。 同樣，驗證並修復CSS 。
如果必須使用表格，請不要將整個網站包裝成一個怪物！ 通過為每個部分使用新表來最大程度地減少副作用和交互問題。
失去誤導和無關的div。
所以代替：
```
 <body> <div id="header"> <div id="bvhead"> <table id="bvmaintable"> ... Entire site here!!! </table> </div> </div> </body> 
```
使用類似：
```
 <body> <table id="bvHeader"> ... </table> <table id="bvAnnoyingAnimation"> ... </table> <table id="bvMenu"> ... </table> <table id="bvBody"> ... </table> <table id="bvFooter"> ... </table> </body> 
```
請注意，這允許從一個節到下一個節使用不同數量的列，在語義上更有效，並且使以后對表布局的清理更加容易。
考慮使用table- rowspan -a-table-cell，而不是使用rowspan 。 盡管這很丑陋，但對於布局的某些部分更有意義，並且消除了某些行/列數學錯誤。