html电子邮件中的奇数空格
html电子邮件中的奇数空格
提问于 2014-07-15 14:25:08
我正在为我的公司正在做的一些营销制作HTML电子邮件。我一辈子都找不出桌子底部的空隙。我与所有电子邮件客户端一起使用嵌套表作为优化协议。我不能使用疯狂的css，必须是内联或嵌入(我的平台将运行嵌入式css内联。
我的代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Laser Vision Care Center Wants To Help You See More Clearly</title>
<style type="text/css">
table {
border-collapse: collapse;
border-spacing: 0;
border: 0;
background:#d7bd83;
}
</style>
</head>
<body>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#e6cc89;color:#fff;font-family:Arial, Helvetica, sans-serif; font-size:12px">
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0">
</td>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" valign="middle" style="background:#e0c788;text-align:center;font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;color:#222961;font-weight:Bold;font-size:20px">"Our Focus Is On The Health Of Your Eyes"</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td width="600" cellpadding="0" cellspacing="0">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/BannerImage.jpg">
</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" width="232">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowTop.jpg">
</td>
<td cellpadding="0" cellspacing="0" width="368" align="right" style="background:#e6cc89;"><p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:22px;color:#6f6f6f;margin-right:20px;">WAKE UP TO CLEAR VISION WITH</span><br>
<span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:27px;color:#6f6f6f;margin-right:20px;">ALL LASER CUSTOM LASIK</span></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr>
<td cellpadding="0" cellspacing="0" width="232">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowSecond.jpg">
</td>
<td cellpadding="0" cellspacing="0" width="368">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ClickHere.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table width="600" cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
<td cellpadding="0" cellspacing="0" width="231">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowThird.jpg">
</td>
<td cellpadding="0" valign="top" cellspacing="0" width="369" align="right" style="top-margin:0;"><a href="tel:1-313-724-2733" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;font-weight:400;font-size:31px;color:#3d3e3e;">or call (313) 724-2733</span></a>
</td>
</tr>
</table>
</td>
</tr>
<tr cellpadding="0" cellspacing="0">
<td width="600" cellpadding="0" cellspacing="0">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFouth.jpg">
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0">
<table cellpadding="0" cellspacing="0">
<tr cellpadding="0" cellspacing="0" style="background:#e6cc89;">
<td cellpadding="0" cellspacing="0" width="222" align="left">
<img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/ArrowFifth.jpg">
</td>
</tr>
</table>
<tr cellpadding="0" cellspacing="0">
<td width="600" align="center">
<table cellpadding="0" cellspacing="15">
<tr>
<td width="41">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Facebook.jpg"></a>
</td>
<td width="40" cellpadding="0" cellspacing="0">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Twitter.jpg"></a>
</td>
<td width="41" cellpadding="0" cellspacing="0">
<a href="#"><img style="display:block;" src="http://truemailmarketing.com/campaigns/2014/july/LaserVisionCareCenter/Instagram.jpg"></a>
</td>
</tr>
</table>
<tr cellpadding="0" cellspacing="0">
<td cellpadding="0" cellspacing="0" style="text-align:center;">
<a href="http://www.lvccenter.com" style="text-decoration:none;"><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:12px;color:#6f6f6f;">www.lvccenter.com</span></a>
</td>
</tr>
<tr>
<td cellpadding="0" cellspacing="0" style="text-align:center;">
<p><span style="font-family:Lucida Sans Unicode, Lucida Grande, sans-serif;text-weight:400;font-size:10px;color:#6f6f6f;">23522 Michigan Avenue Dearborn, MI 48124</span></p>
</td>
</tr>
</table>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-15 14:35:15
第一个空白是因为您的一个p标记使用默认的页边距。让它<p style="margin:0;">来修复它(这是第47行)。
第二个空白是因为有两个高度不同的图像: ArrowSecond.jpg是73 is，而ClickHere.jpg是74 is。您需要使它们与表行匹配以对齐。
P.S.：你的html需要一些小的修正。尝试将其输入到html验证器中。
P.S.2：“醒”和“全部”这两个词不是垂直排列的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24760780
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号