如何修復html電子郵件表中的切片圖像

我被分配創建一個HTML郵件，該郵件使用標題中的切片圖像。我從來沒有寫過HTML郵件，我花了4個小時試圖修復間距。如何修復html電子郵件表中的切片圖像

下面的代碼： http://jsfiddle.net/8EHED/

雖然沒有在上述網站的TR之間的空間，它是在常規的瀏覽器，如IE，火狐和Chrome的罰款。

我要瘋了的問題是使這個看起來正確的HTML電子郵件。這裏是什麼樣子，當我輸入的代碼到一個新的Thunderbird消息，如：

如何看間距不喜歡它應該是什麼？我不想花費更多的時間來解決這個問題！我錯過了什麼或做錯了什麼？

來源

2012-03-30 micah

你的表格單元格的大小並不一致，因爲這是一個表，它會扭曲你的細胞的大小，以因試圖創建一個一致的表不合適的尺寸，從而營造不同的效果那麼你設計了什麼。

參考這裏作進一步的解決方案：

html table cell width for different rows

或修改的代碼：

<table id="Table_01" width="650" height="290" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302> 
       <a href="http://www.example.com"> 
        <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td> 
      <td valign=top align=left colspan="3" width=241> 
       <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td> 
      <td valign=top align=left width=43> 
       <a href="http://twitter.com/"> 
        <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td> 
      <td valign=top align=left width=64> 
       <a href="http://www.facebook.com/"> 
        <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td> 
     </tr> 
    </table> 

    <table id="Table_02" width="650" height="290" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302> 
       <a href="http://www.example.com/"> 
        <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td> 
      <td valign=top align=left width=97> 
       <a href="http://www.example.com/collection/photos/"> 
        <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td> 
      <td valign=top align=left width=78> 
       <a href="http://www.example.com/events/"> 
        <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td> 
      <td valign=top align=left colspan="3" width=173> 
       <a href="http://www.example.com/bottle-service/"> 
        <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td> 
     </tr> 
    </table>

來源

2012-03-30 00:56:52 Rich

謝謝您驗證此內容。我不知道不一致的單元大小會像這樣影響它。我想我的圖形需要重新設計或切片需要更新以保持一致。 – micah 2012-03-30 01:34:38

你的方法與2表確實解決了最初的問題，但它創建了兩個表之間的小差距。我如何擺脫這個小差距？另外，對於讀這個的人來說，兩個表的高度需要反映行的高度才能正常工作。 – micah 2012-03-30 19:56:24

您的表格的靜態高度爲290，如果您刪除高度字段，表格將假定行的高度。 – Rich 2012-03-30 21:11:17

嘗試此以去除間隙

<table cellspacing=0 cellpadding=0 border=0><tr><td><table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td valign=top align=left width=302 height=51> 
       <a href="http://www.example.com"> 
        <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td> 
      <td valign=top align=left colspan="3" width=241> 
       <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td> 
      <td valign=top align=left width=43> 
       <a href="http://twitter.com/"> 
        <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td> 
      <td valign=top align=left width=64> 
       <a href="http://www.facebook.com/"> 
        <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td> 
     </tr> 
    </table> 
    </td></tr> 
    <tr><td> 
    <table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0"> 
<tr> 
      <td valign=top align=left width=302 height=238> 
       <a href="http://www.example.com/"> 
        <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td> 
      <td valign=top align=left width=97> 
       <a href="http://www.example.com/collection/photos/"> 
        <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td> 
      <td valign=top align=left width=78> 
       <a href="http://www.example.com/events/"> 
        <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td> 
      <td valign=top align=left colspan="3" width=173> 
       <a href="http://www.example.com/bottle-service/"> 
        <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td> 
     </tr> 
    </table> 
    </td></tr></table>

來源

2012-03-30 21:07:12 Rich

對，我以前試過，但不幸的是它沒有工作。當我將它發送到Gmail或Hotmail或任何其他在線電子郵件時，兩個表格之間仍有空間。 – micah 2012-03-31 00:11:48

查看電子郵件的來源並查找返回字符，您的代碼中的某處是瀏覽器忽略但電子郵件應用程序識別並激活的文本格式選項。 – Rich 2012-03-31 00:28:33

我可以看到的唯一區別是前面沒有元素。我試圖用css來定位它，但是沒有做任何事情，所以我不認爲它是這個新的tbody元素。除此之外，除了更新後的src（只是爲了將圖像包含在電子郵件中而改變）之外，我認爲它是一致的。 – micah 2012-03-31 00:43:22

添加風格=「顯示：塊「到你的圖片

來源

2013-10-31 11:43:04

如何修復html電子郵件表中的切片圖像

回答

相關問題