如何防止過高？

它必須是愚蠢的東西，但我無法弄清楚迄今爲止...如何防止過高？

這裏是我的HTML：

<table cellspacing="0" cellpadding="0" border="0"> 
<tr> 
    <td style="height: 8px"><img src="/media/note2.png" width="8" height="8" border="0"></td> 
    <td style="height: 8px"></td> 
    <td style="height: 8px"><img src="/media/note1.png" width="8" height="8" border="0"></td> 
</tr> 
<tr> 
    <td class="NoteCell"></td> 
    <td class="NoteCell">{{ text }}</td> 
    <td class="NoteCell"></td> 
</tr> 
<tr> 
    <td style="height: 8px"><img src="/media/note4.png" width="8" height="8" border="0"></td> 
    <td style="height: 8px"></td> 
    <td style="height: 8px"><img src="/media/note3.png" width="8" height="8" border="0"></td> 
</tr>

我期待的第一和第三行有8像素的高度，但由於某些原因，他們高得多（好像有文字裏面，但沒有文字！）

困惑...任何幫助將不勝感激！

來源

2010-05-15 Ilya Kogan

沒有你的CSS我不能100％確定，但是在這些''元素上設置'line-height：8px'是做什麼的？ – 2010-05-15 07:49:52

哪些瀏覽器顯示此行爲？ – 2010-05-15 08:33:36

我刪除了所有的CSS，它仍然發生。 IE和Chrome都顯示此行爲。設置「line-height：8px」在一定程度上降低了高度，但第三行仍高於8px。另一條信息：如果從文檔的頂部刪除<！DOCTYPE HTML PUBLIC < - DOCTYPE HTML PUBLIC> - // W3C // DTD HTML 4.01 Traditional // EN「>，則不會複製問題。 – 2010-05-15 08:55:33

嘗試td img { display: block; }

來源

2010-05-15 09:48:53 Alohci

img {display：block; }做到了！謝謝！ – 2010-05-15 10:46:15

爲什麼單元格的高度錯誤？ – adius 2014-11-20 20:52:18

@adius - 由於OP說「好像裏面有文字」。就是這樣。該圖像默認爲替換的內聯元素，放置在一個線框中。所有線框都包含一個[strut]（http://www.w3.org/TR/CSS2/visudet。html＃strut），一個零寬度的匿名框，它由容器元素中的文本字符的font-size和line-height形成，並與基線垂直對齊。這是支柱創造了額外的高度。使圖像「顯示：塊」意味着它不在線框中。線框永遠不會創建，並且沒有支柱，所以沒有額外的高度。 – Alohci 2014-11-20 21:20:14

是第一和第三行的第二列定義的最小高度的原因。

請注意，一行中的所有列將具有相同的高度，並且一列中的所有行將具有相同的寬度。

這就是表格的渲染方式。

所以，你將不得不額外寫：

td { fontsize: 8px; }

來源

2010-05-15 09:59:05

非常感謝，但不幸的是，這並沒有幫助。反正裏面沒有文字。 – 2010-05-15 10:47:48

提示1.您的代碼段粘貼到一個空的HTML頁面，並找出如果問題仍然存在，確保文檔類型是一樣的目標頁面。

提示2.使用具有CSS調試功能的瀏覽器擴展，檢查並修改應用於表格行，單元格和單元格中圖像的CSS。

提示3.您可以通過添加所有這些嘗試，如果這些幫助之一：

table {border-collapse:collapse;table-layout:fixed} 
td,tr {padding:0} 
td img {margin:0;height:8px}

如果有幫助，這意味着在樣式表其他定義使單元格或行高。通過逐個刪除我的css建議，可以找出造成它的原因。

來源

2010-05-15 11:53:47

我有類似的問題，並vertical-align:top;爲我做了詭計。

來源

2017-08-28 09:21:32

如何防止​​過高？

回答

相關問題

如何防止過高？