为什么这个png有白色边框

Question

这个png-24图像看起来像它的颜色完全延伸到302×354尺寸的边缘： 但是，当我把它放在一个td并通过电子邮件发送时，我得到这样的东西：

html table：

    <td rowspan="3" style="vertical-align:top; border:1px solid #e6e6e6; background-color:#f0f1f2;">
        <img src="email_img.png" height="177px" alt="Sample image" />
    </td>

屏幕截图来自gmail。但是没有看过其他电子邮件客户端。知道为什么会这样吗？谢谢！

Answer 1

这是因为每个电子邮件客户端都有自己的渲染引擎，即Outlook与另一个桌面电子邮件客户端。要解决这个问题，您需要进行大量的跨客户端测试，并且只使用他们都喜欢的内联样式

OR

如果你在gmail中看到这个，那么你可能会将gmails样式表级联下来并影响你的DOM元素。要解决此问题，您需要为表定义样式（内联，因为它是电子邮件或引用服务器上的样式表，尽管基于Web的客户端可能会剥离正文之外的所有内容）

Answer 2

对于电子邮件始终使用<img src="[img url]"height="[img height]" width="[img width]" style="display:inline-block;" border="0">如果没有，某些电子邮件客户端将添加边框

Answer 3

您需要设置img。

的样式

将CSS设置为display:block或vertical-align:top。

Answer 4

 <td rowspan="3" style="vertical-align:top; border:1px solid #e6e6e6; background-color:#f0f1f2;" cellpadding="0">
    <img src="email_img.png" height="177px" alt="Sample image" />
</td>

尝试调整cellpadding。你确实想在那个图像上设置一个高度，在我看来，电子邮件是一个巨大的痛苦，但如果你指定所有内容并且不需要任何单独的HTML渲染引擎，你会发现更少的麻烦。