IE8拉伸表格單元格高度

我有一個基於表格的頁面佈局，並且我想用更現代的標記重構它，但這不是一個選項。佈局使用跨越兩行的單元格作爲右側的側邊欄，而左上角的單元格包含簡單的標題，左下角的單元格包含頁面的主要內容。左上方的單元格具有固定的高度，並且未指定底部單元格和右側單元格的高度。我創建了說明我的問題，一個簡單的例子：IE8拉伸表格單元格高度

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<style type="text/css"> 
.fixed { height: 100px; } 

table { border: 1px solid #000; } 
td { border: 1px solid #ddd; vertical-align: top; } 
tr { border: 1px solid #cfc; } 
* { padding: 15px; } 
</style> 
</head> 
<body> 

<table> 
<tr class="fixed"> 
<td>left</td><td rowspan="2"><div style="height: 500px;">right</div></td> 
</tr> 

<tr class="stretch"> 
<td>left</td> 
</tr> 

<tr class="footer"> 
<td colspan="2">footer</td> 
</tr> 

</table> 

</body> 
</html>

我已經設置了右側立柱內嵌的高度爲500像素，以模擬內容比左側的兩列的高度更高。這在現代瀏覽器中的表現如預期：左上角單元格的高度保持不變，而較低單元格伸展以填充額外空間。但在IE8中，兩個左邊的單元格都是垂直拉伸的。我需要頂部牢房來保持它的固定高度。我如何讓IE8使用唯一的CSS兌現爲左上角單元格指定的高度？

編輯： 而不是設置在右列td的高度，我設置高度在一個div在右列內。

來源

2011-05-13 undefined

我認爲Jeroen是正確的，沒有純粹的CSS解決方案來解決這個問題。任何時候當表格中的單元格設置爲rowspan時，IE將忽略在這些行上設置的任何顯式高度。解決方案是永不使用rowspan。在我的情況下，我能夠通過在第二行中放置兩行內容來避開這個問題，將第一行中的單元格留空，並使用負餘量將內容的起始位置移動到第一行。我希望這對其他人有幫助。如果任何人有一個純粹的CSS解決方案，我會接受這個答案。

來源

2011-05-17 15:13:50 undefined

有趣的問題。害怕的答案可能是，你沒有真正的解決方案你所描述的問題，只有解決方法。我發現增加一些樣式到第二個「左」td使問題消失，至少在您的示例中：

<td style="min-height: 500px;">left</td>

希望有所幫助。

PS。 IE9有同樣的問題。

來源

2011-05-14 12:27:52 Jeroen

這不是一個真正的選項，因爲在繪製頁面時右列的高度並不真正固定或不明確。 – undefined 2011-05-16 16:57:18

我明白了。我害怕，但我的答案仍然是唯一的答案：只有我提供的解決方法可能會有幫助，否則你將不得不求助於JavaScript或全新的佈局。 – Jeroen 2011-05-16 18:17:36

即使一個單元格只包含一個圖像，您也必須知道表格單元格的高度是根據文字基線的位置計算出來的;而當前的文本風格對計算這個基線位置和它之後的行距有影響。您可能會認爲設置「line-height：1」足以避免這種行間距，即始終出現在每行文本下方的邊距差距。這還不夠。最簡單的解決方案是爲包含圖像的單元格設置「line-height：0.8」（或更低），以便0.2em默認值在基線以下添加間隙（由於缺少文本）將使基線適合細胞高度。然後，您可以正確放置圖像（或任何固定高度的元素）在單元格的高度將決定單元格高度，而不會拉伸單元格高度。

注意：使用此行高度，您將放置在該單元格中的任何文本的基線只位於單元格的底部，以便下行器將與當前單元格的底部填充，邊框，邊框間距重疊，或者在下一行的單元格的邊框，填充或內容中，或者如果單元格位於最後一行，則表格下方的內容。

測試在谷歌瀏覽器（當前版本15）

實施例（HTML5）：

<!DOCTYPE html> 
<html><head> 
    <title>Examples of image transforms (rotations and mirroring)</title> 
    <style> 
    table,tbody,tr,td,image{margin:0;border:1px solid #999;border-collapse:collapse;border-spacing:0;background:#FFF;color:#000;padding:0;vertical-align:middle;text-align:center;} 
    td.z{line-height:0;} 
    </style> 
</head><body> 
    <table border="0" cellspacing="0" cellpadding="0"> 
    <tbody><tr> 
    <td style="border-bottom:hidden">Normal 0° (1,0,0,1,0,0)</td> 
    <td style="border-bottom:hidden">Mirrored 0° (-1,0,0,1,0,0)</td> 
    <td style="border-bottom:hidden">Mirrored 90° (0,1,1,0,0,0)</td> 
    <td style="border-bottom:hidden">Normal &minus;90° (0,1,-1,0,0,0)</td> 
    </tr><tr> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,1,0,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,1,-1,0,0,0);"/></td> 
    </tr><tr> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(1,0,0,-1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(-1,0,0,-1,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,1,0,0,0);"/></td> 
    <td class="z"><image alt="" src="Avatar-220px.jpg" style="-webkit-transform:matrix(0,-1,-1,0,0,0);"/></td> 
    </tr><tr> 
    <td style="border-top:hidden">Mirrored 180° (1,0,0,-1,0,0)</td> 
    <td style="border-top:hidden">Normal 180° (-1,0,0,-1,0,0)</td> 
    <td style="border-top:hidden">Normal 90° (0,-1,1,0,0,0)</td> 
    <td style="border-top:hidden">Mirrored &minus;90° (0,-1,-1,0,0,0)</td> 
    </tr></tbody> 
    </table> 
</body></html>

註上類「z」的表格單元格（線高度：0）的特技僅含有圖像，以便使它們完全適合圖像大小。本示例中顯示的圖像是8個不同方向的小方形照片。每張照片只有一個薄的1px灰色邊框，並且其上方或下方顯示了其照片，照片恰好適合在單元格邊框內。

請注意，重定向使用WebKit樣式（適用於Safari和Chrome）;您可以通過更改前綴來爲IE和Firefox添加等效屬性;對於CSS3，不需要前綴。如果不支持這些轉換，圖像將不會被重新定向/鏡像，但它們仍然適合細胞，沒有額外的內部間隙。

來源

2011-11-24 08:28:34

IE8拉伸表格單元格高度

回答

相關問題