Firefox中表格行模型解釋

Question

首先：表格，不是我的設計，我的道歉。

我們有這個網站，銷售的產品以表格形式顯示。該網站已經開通，但似乎還沒有經過足夠徹底的測試。開發者正在假期，所以我必須修復它。問題就出在盒模型解釋，這裏一個例子：

Chrome的渲染：

發生了什麼事是，Chrome瀏覽器添加填充到的高度：

火狐螢火蟲覆蓋渲染td（height：55px + padding-top：5px + padding bottom：10px = 70px），而Firefox保持給定的高度並在內部添加填充。我認爲盒子模型問題是IE的事情，但唉。

然而，蹩腳的部分是，我似乎無法修復它。該TD有一個colspan="2"，其中I 認爲與CSS的中介。

td.productFooter { 
    background-color: #C4BFB9; 
    height: 55px; 
    padding-bottom: 10px; 
    padding-top: 5px; 
} 

我試圖改變display到inline-block（和其他幾個選項），這正確地設置高度，但後來我失去了我background-color（默認回表本身的背景色） 。如果我設置display: block，高度不錯，但背景只是第一個單元格的顏色，它忽略了colspan="2"。

根據MDN-moz-box-sizing: content-box;應該修復它，但那根本就沒有做任何事情。

有沒有人有一個想法如何解決這個問題？

Answer 1

我被騙了，但它有效。在td內部增加了一個div，其中position:relative;height:55px;解決了這個問題。我知道，這不是一個非常漂亮的解決方案，但是它會在新網站上線（從現在開始三週）之前完成。

<td class="productFooter" colspan="2" > 
    <div style="position:relative;height:55px"> 
    *all the content* 
    </div> 
</td> 

Answer 2

我的建議：溝表。使用CSS編碼表格樣式佈局並不需要很長時間 - 特別是如果信息是從產品數據庫那樣的數據庫生成的。只需事先對其進行編碼，然後將其應用到現場。

Answer 3

這看起來像https://bugzilla.mozilla.org/show_bug.cgi?id=248239是固定在Firefox 16，那將船舶在10月9日

所以根據您的時間安排，最簡單的事情可能只是等到那時。