html - 通过电子邮件发送表格,在表格内添加图像 - 图像略微向右移动

标签 html css html-email

我正在尝试将图像添加到电子邮件客户端中的页脚。在较旧的 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&nbsp;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>                     

Email footer snapshot

最佳答案

提醒一下。我花了一点时间看看问题出在哪里。没有意识到它是页脚的顶部(很难看到,因为它太小了)。

尝试:

<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/

相关文章:

html - 某些背景颜色未加载 Outlook 2016

vb.net - system.net.mail isbodyhtml = true 与两个 AlternateView 的优缺点

javascript - thead 和 tbody 之间的列不匹配

html - 创建 pin 时将图像传递到 Pinterest?

javascript - 捕获页面内的返回导航

javascript - 如何清除 AngularJs 服务器缓存和 cookie?

jquery - 在另一个剑道分离器中管理调整大小的剑道分离器

JavaScript 动画挂起

html - 在 html 电子邮件中嵌入打印链接?

javascript - 带有 jQ​​uery 的 HTML 文件选择器