html时事通讯中的图像叠加表答案

【问题标题】：Image overlay table in html newsletterhtml时事通讯中的图像叠加表
【发布时间】：2013-10-11 03:18:18
【问题描述】：

我正在制作 HTML 时事通讯，但一直遇到这个问题。由于某种原因，顶部的图像忽略了边距并给出了一条难看的白线。

虽然这个网站说电子邮件客户应该接受保证金：http://www.campaignmonitor.com/css/

有谁知道如何解决这个问题？

编辑：新的更简洁的代码，但仍然是同样的问题！我不知道怎么把那该死的东西弄下来。 =/（我的左边框现在也不见了，我也不知道为什么）

<table cellspacing="0" cellpadding="0" width="811px" style="border:0px solid black;border-collapse:collapse">
    <tr>
            <td width="150px" VALIGN=TOP style="border-bottom: 1px solid #000000;">Nieuwsbrief #<?php echo $nr; ?></td>
            <td width="500px" style="vertical-align: bottom;"><img src="http://pietrow.net/newsletter/images/lad_wide.png" style="z-index:-1;"></img></td>
            <td width="150px" align="right" style="vertical-align: top; border-bottom: 1px solid #000000;" >Datum: <?php echo $datum; ?></td>
    </tr>
    <tr style="background: #DBDBDB; border: 1px solid #000000; border-top: 0px" width="811px">
            <td width="270px"><center><a href="http://home.strw.leidenuniv.nl/~kaiser/">Website</a></center></td>
            <td width="271px"><center><a href="https://www.facebook.com/LADKaiser">Facebook</a></center></td>
            <td width="270px"><center><a href="mailto:kaiser@strw.leidenuniv.nl">Contact</a></center></td>
    </tr>
    <tr style="background: #DBDBDB; border:0px; border-left: 1px solid #000000; border-right: 1px solid #000000;" width="811px">
            <td colspan="3" width="811px"><center><a href="#ENTOP">**ENGLISH VERSION BELOW**</a></center></td>
    </tr>
    <tr >
            <td style="background: #DBDBDB; border: 1px solid #000000; border-bottom: 0px;" colspan="3" width="811px">

【问题讨论】：

标签： html css email html-table html-email

【解决方案1】：

请记住，HTML 电子邮件需要非常“老式”，因为呈现它们的电子邮件客户端甚至比旧版本的 IE 还要陈旧。因此，试着回想一下 DIV 和可爱的 CSS 布局之前的日子，回到表格用于布局的日子......

尝试添加：

cellpadding="0" cellspacing="0"

在您的表格声明中，然后考虑将您的内容放在一个表格中在主表格中，而不是两个表格堆叠在一起。或者，如果可以的话，合理化三列并创建一个表。

【讨论】：

它不起作用。 :P 我把所有东西都放在一张桌子上的问题是，顶框必须是白色且无边框的，而它下面的东西是灰色的并且有边框。（有没有办法做到这一点？）
将内联样式应用于您想要的带有边框/背景的表格单元格。这是一种冗长的方法，但这就是 HTML 电子邮件的问题。
所以透明的桌子环绕着其余的？我会试试的
做了一些更新（见主帖）但仍然是同样的问题，现在左边框不见了 O.o)
HTML 电子邮件很痛苦！我创建了一个小提琴：jsfiddle.net/WeB3X 我添加了 'display: block;'到图像并将其拉到正确的位置。此外，在小提琴上，边框显示正确，所以您的显示器的某些特性可能隐藏了它们？

【解决方案2】：

您的图片上需要display:block;。以下是所有图像在 html 电子邮件中的外观示例：

<img style="margin: 0; border: 0; padding: 0; display: block;" src="" width="" height="" alt="">

一些补充说明：

您不需要<center>，请改用<td align="center">。
您不应在 width="" 声明中使用 px。示例：width="150"
使用 bgcolor 方法仅在表格或表格单元格中声明背景颜色。示例：bgcolor="#DBDBDB"

【讨论】：

另外，如果该图像是可点击的，请务必包含
@RLacorne 我从来没有发现需要在超链接图像标签中使用border="0" - 您发现哪个客户是这样做的灵感来源？
如果没有包含border="0"，Windows XP 上的Microsoft Outlook 2002 软件将显示一个2-3 像素的蓝色链接边框。虽然我似乎没有人再使用这个软件了，包括 border="0" 是一个好习惯，因为有些人在谈到计算机时仍然生活在过去。 :)
可能也是Windows版本的原因。