电子邮件表格，在表格中添加图像 - 图像稍微向右移动
我正在尝试将图像添加到电子邮件客户端中的页脚。在较旧的Safari浏览器和Outlook Mac 2011中，图像稍微移动到表格其余部分的右侧。
我通过HTML属性将边框清零，但它没有帮助。然后我试图用内联样式将边框清零，但是没有用。
有没有可用的解决方案？ （我还附上了我的问题的快照）
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" /></td>
</tr>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar@efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - <a href="http://email.exacttarget.com/Company/Policies/PrivacyPolicy.html?linkid=View+Privacy+Policy" alias="View Privacy Policy" style="color: #ff0000">View our policy</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
<a href="%%subscription_center_url%%" alias="Manage Subscriptions" style="color: #ff0000">Manage Subscriptions</a> | <a href="%%profile_center_url%%" alias="Update Profile" style="color: #ff0000">Update Profile</a> | <a href="%%unsub_center_url%%" alias="Unsubscribe" style="color: #ff0000">Unsubscribe</a><br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
3 个答案:
答案 0 :(得分：2)
只是抬头。花了我一点时间来看看问题是什么。没有意识到它是页脚的顶部（很难看到，因为它非常轻微）。
尝试：
<table width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" width="600" height="53" style="display: block; border: 0;" /></td>
</tr>
</table>
我使页脚图像父表的宽度与下面的表格相同。
另外，我建议为所有图像设置宽度和高度，并在HTML中进行。不确定它是否会有很大差异，但总是以最基本的格式做事情更好（例如：如果你可以通过CSS在HTML上做，那么就做！）
解决方案2：
将两个表包装在居中的600宽度表中。然后让两个子表都达到100％。
答案 1 :(得分：0)
在lejimmie回答的基础上，尝试将图像添加到页脚表中并删除cellpadding并将其插入到图像下方行的TD中。
这应该包含图像与下面的页脚相同的限制，并消除不对齐的可能性。
见下文例如：
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="0" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td align="center" bgcolor="#FFFFFF" style="display:block; border-collapse:collapse;"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footer-arch.png" style="display:block;" /></td>
</tr>
<tr>
<td style="padding:10px;">
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://m.familydollar.com" style="text-decoration: none; color:#ff0000;">
m.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar@efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - <a href="http://email.exacttarget.com/Company/Policies/PrivacyPolicy.html?linkid=View+Privacy+Policy" alias="View Privacy Policy" style="color: #ff0000">View our policy</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
<a href="%%subscription_center_url%%" alias="Manage Subscriptions" style="color: #ff0000">Manage Subscriptions</a> | <a href="%%profile_center_url%%" alias="Update Profile" style="color: #ff0000">Update Profile</a> | <a href="%%unsub_center_url%%" alias="Unsubscribe" style="color: #ff0000">Unsubscribe</a><br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 2 :(得分：0)
当@lejimmie向我提供了几个可供尝试的解决方案时，它可以完美地工作，但对于响应式电子邮件并不完全，但它提供了一个很好的指南来开发适当的解决方案。
对于此电子邮件，向标题添加媒体查询的简单解决方案将无法完成此任务，因为我们无法控制标题代码内容。令人沮丧的是，有时在SalesForce上使用Exact Target。
这就是完成工作的目的，到目前为止，它似乎在移动和桌面电子邮件客户端都能很好地工作......
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<tbody>
<tr>
<td align="center"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/5/footerarch.png" width="100%" style="max-width: 600px; display: block; border: 0;"></td>
</tr>
</tbody>
</table>
<table bgcolor="#efecef" class="content" width="600" border="0" cellpadding="10" cellspacing="0" align="center">
<!-- Footer 600px wrapper -->
<tr>
<td>
<!-- Social & Mobile Boxes -->
<table class="footerboxes" width="290" cellpadding="5" cellspacing="0" border="0" align="left">
<tr>
<td>
<!-- SocialBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;" >
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Be social.
</strong>
</span>
</td>
<td>
<a href="http://facebook.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/fb_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://twitter.com/myfamilydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/twitter_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://pinterest.com/familydollar" target="_blank" border="0">
<img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/pin_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
<td>
<a href="http://youtube.com/thefamilydollar" target="_blank" border="0"><img src="http://image.efamilydollar.com/lib/feea1c79706d02/m/4/youtube_icon.png" style="display: block; width: 25px; height: 25px;" border="0"/>
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- MobileBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Go mobile.
</strong>
</span>
</td>
<td style="font-family:Arial, Helvetica, sans-serif; font-size: 13px; color:#636363;">
<span>
Text
</span>
<strong style="color:#ff0000;">
VALUE
</strong>
to
<strong style="color:#ff0000;">
28767
</strong>
<br>
<span>
Visit
</span>
<a href="http://www.familydollar.com" style="text-decoration: none; color:#ff0000;">
familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!-- BlogBox -->
<table align="center" width="285" bgcolor="#ffffff" cellpadding="5" style="border: 1px; border-color: #aaaaaa; border-style: solid;">
<tr>
<td height="35">
<span style="font-family:Arial, Helvetica, sans-serif; font-size: 19px; text-transform: uppercase;">
<strong>
Get tips.
</strong>
</span>
</td>
<td align="right" style="font-family:Arial, Helvetica, sans-serif; font-size: 13px;">
<span>
Visit
</span>
<a href="http://blog.familydollar.com" style="text-decoration: none; color: #ff0000;">
blog.familydollar.com
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End of Social & Mobile Boxes -->
<table cellpadding="10" cellspacing="0" align="center" class="footer">
<tr>
<td align="left">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
<span style="font-style: italic;" >
While Quantities Last. No Sales To Dealers. Some Items Not Available At All Stores. Limited Quantities On Some Items
</span>
<br>
<br>
This email was sent to %%emailaddr%% by:
<br>
%%Member_Busname%%
<br>
%%Member_Addr%%
<br>
%%Member_City%%, %%Member_State%%, %%Member_PostalCode%%
</td>
</tr>
</table>
</td>
</tr>
</table>
<table cellpadding="5" width="100%">
<tr>
<td style="font-family: arial, helvetica, sans-serif; font-size:12px;">
To ensure future delivery of email, please add
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book-Email Address" target="_blank" style="text-decoration: none; color: #ff0000;">
familydollar@efamilydollar.com
</a>
to your safe sender list or address book.
<a href="http://www.memberlandingpages.com/address_book/address_book_add-a.htm" alias="Add Address Book Click Here" target="_blank" style="text-decoration: underline; color: #ff0000;">
Click here for instructions.
</a>
<br><br>
We respect your right to privacy - <a href="http://email.exacttarget.com/Company/Policies/PrivacyPolicy.html?linkid=View+Privacy+Policy" alias="View Privacy Policy" style="color: #ff0000">View our policy</a>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="verdana" size="1" color="#777777">
<br>
<a href="%%subscription_center_url%%" alias="Manage Subscriptions" style="color: #ff0000">Manage Subscriptions</a> | <a href="%%profile_center_url%%" alias="Update Profile" style="color: #ff0000">Update Profile</a> | <a href="%%unsub_center_url%%" alias="Unsubscribe" style="color: #ff0000">Unsubscribe</a><br><br>
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
再次感谢@lejimmie，你带领我走向正确的方向。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？