2011-11-18 88 views
2

下面是一個屏幕截圖顯示的問題: 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收緊單元格?

+3

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

+1

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

回答

3

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

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

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

+0

@Downvoter - 謹慎評論? – Oded

+0

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

+0

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

1

你的細胞都是空的,對不對? <td></td>

一個補丁修復,這將肯定是工作中的每個細胞堅持一個&nbsp;<td>&nbsp;</td>

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

+0

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

+0

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

+1

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

0

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

更好復位CSS是Eric Mayer's

相關問題