Windows Outlook 07' 10' html 电子邮件中图像上的垂直 1px答案

【问题标题】：Vertical 1px on image in windows outlook 07' 10' html emailWindows Outlook 07' 10' html 电子邮件中图像上的垂直 1px
【发布时间】：2014-07-17 04:40:49
【问题描述】：

我的 HTML 电子邮件在 windows Outlook 2007 和 2010 中的图像上有一个垂直的白色 1 像素。我不知道为什么会这样。到目前为止，这仅发生在 Windows Outlook 中。而不是任何其他客户。

这是一张照片

<tr>
    <td id="header" class="w640" width="640" align="center" bgcolor="#FFFFFF">
        <img editable label='header image' src="images/header.gif" class="header" width="640">
    </td>
</tr>

【问题讨论】：

给出完整的html和相关的css或者jsfiddle
@SureshPonnukalai 是 header.gif - jsfiddle.net/QdDQm
我检查了你的小提琴。我添加了 640x640 大小的图像而不是 header.gif。我没有发现这部分有任何问题。检查jsfiddle jsfiddle.net/QdDQm/1
是的，看起来不错，干杯。我从来没有见过，上面的图片是我客户的截图。所以我发现很难修复:(
尝试折叠你的<tr><td><img /></td></tr> 没有回车和空格;-)

标签： html css email outlook campaign-monitor

【解决方案1】：

这个额外的空间可能是由很多原因造成的：

图片尺寸错误且小于其容器
如果您将图像缩放到其原始大小以外的大小，Outlook 可能会忽略这些属性并继续以原始大小显示。
如果您尝试使用边距或填充属性
如果您没有使用 table td { border-collapse:collapse } 和 table cellpadding="0" cellspacing="0" 折叠单元格
如果您不制作图像显示：块
如果您错误地忽略了实际图像中的空白（不正确的切片）
如果在此单元格上方或下方的某个位置，您的内容会导致表格或单元格的宽度超出应有的范围。

此外，仅从您发布的代码示例中。您应该从单元格中删除 bgcolor，还应该从 img 中删除宽度，但将其保留在单元格上。

【讨论】：

【解决方案2】：

我在谷歌搜索时遇到了 Outlook 中这种边框行为的两个可能原因：

Outlook 将1px border 添加到表格单元格元素中。您可以通过对表格单元格使用border-collapse : collapse CSS 属性以及对table 元素使用cellpadding="0" 和cellspacing="0" 属性来摆脱它。奇怪的是，这个边框似乎只在td 的右侧，但由于<img> 布局，它可能如此。如果您想了解有关此问题的更多信息，可以关注此link。
如果你在 CSS 类中的某个地方设置你的边框到 border: 0px style color 之类的东西（或根本不设置）（这里的主要部分是将 border-width 设置为 0px) 它将被 Outlook 忽略，因此您可以通过设置border-style : none 使其完全不显示边框。我想这更接近您的问题，因为我找到了类似的示例图片here。

【讨论】：

【解决方案3】：

更新Fiddle

通常当我遇到这类问题时，我会用一张桌子来包装我的 td。下面是您拥有图像的部分标记。

    <td>
       <table width="640" border="0" style="width:640px;border-collapse:collapse;padding:0;margin:0;">
           <tr>
             <td>
               <img editable label='header image' src="http://t0.gstatic.com/images?q=tbn:ANd9GcTDhTODtu4yyVkbK7GUbFKctbR8Rgry7BRXnaC9Ztgls1vEVqsV" class="header" width="640" >
              </td>
           </tr>
      </table>
</td>

这将解决您的问题。

【讨论】：