我正在尝试将图像添加到电子邮件客户端中的页脚。在较旧的 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>
最佳答案
提醒一下。我花了一点时间看看问题出在哪里。没有意识到它是页脚的顶部(很难看到,因为它太小了)。
尝试:
<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 中进行。不确定它是否会有很大的不同,但总是以尽可能最基本的格式做事更好(例如:如果你可以在 HTML 中而不是 CSS 中做,那就去做吧!)
解决方案 2:
将两个表格包装在居中的 600 宽度表格中。然后让两个子表都达到 100%。
关于html - 通过电子邮件发送表格,在表格内添加图像 - 图像略微向右移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29808836/