爲什麼表格單元在不同的瀏覽器中顯示不同？

下面是一個屏幕截圖顯示的問題： enter image description here 爲什麼表格單元在不同的瀏覽器中顯示不同？

這裏是CSS我使用：

#board table { 
    background: #eef0ff; 
    border-spacing: 0px; 
    border: 1px solid #475476; 
} 

#board td { 
    height: 20px; 
    width: 20px; 
    border: 1px solid #cfd7ee; 
}

我怎樣才能使細胞diferent瀏覽器相同的大小？有誰知道爲什麼Opera和Firefox收緊單元格？

來源

2011-11-18 user1048261

這是默認樣式。比如邊距和填充。這就是爲什麼有些人喜歡使用重置文件。比如這一個由邁耶。 http://meyerweb.com/eric/tools/css/reset/ – Matt

有些人喜歡只是重寫相關的默認樣式，找到確切的原因，而無需添加全新的默認值替代學習。 – reisio

您將需要使用CSS reset，或者設置一些自己的默認值的表空間，填充和設計中的其他元素。

一個CSS復位（您的或第三方的一個）將確保所有的瀏覽器也有類似的起點，對於樣式，不同的瀏覽器不會對不同的元素相同的樣式默認。

此外，正如@thirtydot在his answer中所說，某些瀏覽器將忽略完全空白表格單元的高度，如<td></td>。爲確保不會被忽略，您應該爲這些單元格添加一些內容，一個不錯的選擇是非休息空間 -  ，採用這種方式：<td> </td>。

來源

2011-11-18 11:15:10 Oded

@Downvoter - 謹慎評論？ – Oded

我沒有downvoted，但我不認爲你的答案在這種情況下是正確的。看看我的答案。 – thirtydot

@thirtydot - 可能。我會說我們都得到了答案的一部分。 – Oded

你的細胞都是空的，對不對？ <td></td>？

一個補丁修復，這將肯定是工作中的每個細胞堅持一個 ：<td> </td>。

對於一些其他的想法，請參閱：CSS table, table-cell height issue in Firefox

來源

2011-11-18 11:27:58 thirtydot

不知道爲什麼這是downvoted，我幾乎肯定*正確*。在Firefox/Chrome比較：http://jsfiddle.net/thirtydot/L3EQJ/ – thirtydot

我沒有投票給你，但我看着你的jsfiddle和兩個單元格完全一樣。此外，這個答案不是解決問題的辦法。我希望這有助於降低您的確定 –

@Abe Petrillo：這*是解決問題的方法。在原始問題中，Chrome + IE中的單元格看起來很好，並且在Opera + Firefox中被壓縮。猜猜是什麼：http://i.stack.imgur.com/3aoQF.png。 ಠ_ಠ – thirtydot

首先重置像填充，保證金，高度HTML代碼的默認屬性，width.etc ..，那麼你申請你的風格工作

更好復位CSS是Eric Mayer's

來源

2011-11-18 14:10:23 manny

爲什麼表格單元在不同的瀏覽器中顯示不同？

回答

相關問題