如何修复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电子邮件表中的切片图像

回答

相关问题