表單元格中呈現過大的IE

我有以下簡單的表來重現問題：表單元格中呈現過大的IE

<TABLE> 
    <TR> 
    <TD style="border: black solid 1px; width:24px; height:68px; margin:0px; padding:0px" > 
    <IMG 
     style="width: 24px; height: 68px; margin:0px; padding:0px; border:none" 
     src="Image24x68.png"> 
    </TD> 
    </TR> 
</TABLE>

的圖像實際上是24x86像素大。邊界只是標記單元格的邊界。沒有分配給文檔的css文件。

我希望細胞和圖像一樣大。

問題是：表格單元格在任何IE版本（6,7,8）中始終呈現幾個像素過高，而在Firefox和其他瀏覽器中可以正常工作。

有沒有解決方法/解決方法呢？

來源

2009-09-30 Stefan Steinegger

您可以設置圖像顯示爲塊元素，這應該刪除空間。

<IMG style="display: block; width: 24px; height: 68px; margin:0px; padding:0px; border:none" src="Image24x68.png">

來源

2009-09-30 13:19:52

這似乎是一個很好的解決方案，因爲我可以把它放到css文件。 – 2009-09-30 13:43:07

是的，把它放到主要的CSS樣式表中肯定是最好的 - 我只是在內聯中加入它來說明這一點。 – 2009-09-30 13:49:19

是這樣的：http://www.evilfish.co.uk/2007/07/31/ie-white-space-after-image-bug/

去除圖像和結束 td標籤之間的所有空格。在圖像前面它似乎並不重要。

來源

2009-09-30 13:16:26

哇。可怕。這真的解決了這個問題。但很難確定圖像之後沒有空白區域，因爲整個東西是由一些（也非常難看的）PHP代碼創建的... – 2009-09-30 13:40:03

嘗試以下操作：

<table> 
    <tr> 
    <td style="border: 1px solid black; font-size: 1pt;"> 
    <img style="width: 24px; height: 68px; margin: 0; 
     padding: 0; border: 0" src="Image24x68.png" /> 
    </td> 
    </tr> 
</table>

（PS使用的HTML標籤小寫）

來源

2009-09-30 13:31:26 Anax

當我將頁面存儲到本地文件夾時，IE實際創建的大寫HTML標籤。它將所有標籤重寫爲大寫... – 2009-09-30 13:41:19

我想這個網頁上的所有其他解決方案：

使用display:block
刪除空格中的<td>標記（即我用<tr>和<td>標籤沒有把任何空白它們之間）

使用

padding:0px; 
border-spacing:0px; 
border-style:none; 
border-collapse: collapse; 
margin:0; 
overflow: hidden;

除的方法（1），這些並沒有對IE瀏覽器。在將我的頭髮撕開三個小時後，我發現這個更好的解決方案：將hspace=0屬性添加到圖像標籤。例如：

<img src="http://www.printersrose.com/css/myimages/book1.jpg" alt="Header1" 
    class="ImageHeader" hspace="0">

我在http://www.PrintersRose.com上設置了一個例子。

來源

2011-04-12 09:17:37 David

表單元格中呈現過大的IE

回答

相關問題