IE不尊重td寬度

我有一個基於表格的佈局，它被分成四列，其中兩個用於填充目的。在大多數瀏覽器中，它工作正常，但在正常和兼容模式下，至少在IE9上，單元格的大小並不是它們應有的大小。IE不尊重td寬度

我試着定義寬度作爲屬性和CSS樣式，但都似乎沒有幫助。 See fiddle進行演示。

我想：

+------------------------------------------+ 
| 320   | 20 | 39 | 320   | 
|    | |  |    | 
+------------------------------------------+

我得到：（四捨五入，值是小數）

+------------------------------------------+ 
| 324   | 19 | 34 | 321   | 
|    | |  |    | 
+------------------------------------------+

隨着實際內容而不是佔位符的東西不同的是更誇張的是，最左邊的列是和最右邊的像素寬度的。

我最初只有兩列填充邊緣，但切換到當前版本作爲嘗試修復。它沒有效果。

這是HTML通訊，所以使用無表格佈局不是一種選擇。

來源

2011-05-25 Kaivosukeltaja

我沒有看到問題，但我也在運行IE9。 - 另外，表格實際上並不是用於此類內容的理想標籤。你真的應該造型div，也許使用浮動風格。 – 2011-05-25 13:56:02

是的，事實上，由於表格的工作方式，使用表格是一件壞事。不過，你可以保證使用div的好結果。 – FreeSnow 2011-05-25 13:58:50

謝謝，但你有沒有嘗試過在HTML電子郵件中使用浮動的div？它們不適用於大多數電子郵件客戶端。 – Kaivosukeltaja 2011-05-25 14:00:14

我終於找到了解決問題的辦法。四個單元本身是好的，但包含通訊標題和進入這個代碼把它弄壞了：

<tr><td colspan="4">Some long text here</td></tr>

我改成了這一點，它開始工作：

<tr><td colspan="4" width="700">Some long text here</td></tr>

寬列的寬度爲700像素是否或者我不強迫它，但如果我不這樣做，單列單元格的寬度會變得混亂。我認爲這是IE中的一個明確的錯誤。

來源

2011-05-26 07:50:04 Kaivosukeltaja

有助於查看您的CSS和HTML。但是在測量表格的總寬度時不要忘記邊框數量。

margin + border + padding + width = real width。

此外，請確保您沒有任何元素在其中一個比單元格寬度大的單元格中。

來源

2011-05-25 14:02:13 David

小提琴包含HTML，CSS不相關，因爲沒有它可以複製問題。在20px寬的列中只有一個1px邊框，並且沒有邊距或填充或其中任何一個。 – Kaivosukeltaja 2011-05-25 14:45:24

呵呵，沒有任何單元格內的元素超過320px。 – Kaivosukeltaja 2011-05-25 14:47:31

<table width="699" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td width="320" height="50" valign="top"><!--test-->&nbsp;</td> 
    <td width="20" valign="top"><!--test-->&nbsp;</td> 
    <td width="39" valign="top"><!--test-->&nbsp;</td> 
    <td width="320" valign="top"><!--test-->&nbsp;</td> 
    </tr> 
</table>

這應該工作

來源

2011-05-25 14:05:13 Dontlose

是的，清空所有的內容將使單元格尺寸合適，但它有點挫敗了整個時事通訊的目的...... :) – Kaivosukeltaja 2011-05-25 14:57:02

在過去，我發現這是解決幾乎是不可能的問題，除非你離開你的表元素的一個無固定寬度。

如果你這樣做，那麼我發現該列將是調整大小，而其餘的應該是你要求的大小。

這並不理想，但至少它是合理可預測和可控的。

來源

2011-05-25 14:36:47 Spudley

IE不尊重td寬度

回答

相關問題