我继承了这半完成的电子邮件简报模板，但是我在编码技巧方面遇到了很多问题，因为我们始终在所有各种电子邮件客户端中保持页眉和页脚的一致性。对于初学者来说，页脚没有像标题那样正确对齐，它会在顶行和底部图像之间保持1 px的间隙，并在各种电子邮件客户端上继续移动。
以下是完整的剧本：
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="width=device-width, initial-scale=1.0;" name="viewport">
<meta content="telephone=no" name="format-detection">
<title></title>
</head><!-- MESSAGE SUBJECT -->
<!-- BODY -->
<!-- Set message background color (twice) and text color (twice) -->
<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
<style type="text/css">
a:hover { color: #127DB3 !important; }
.footer a:hover { color: #999999 !important; }
>
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
width="100%">
<tr>
<td align="center" bgcolor="#FFD530" style=
"border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
valign="top">
<!-- WRAPPER -->
<!-- Set wrapper width (twice) -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style=
"border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
width="560">
<tr>
<td align="center" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
valign="top"></td>
<td style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
</td>
</tr>
<tr>
<td></td>
</tr>
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href=
"http://www.tower-london.com/delivery-options/"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
title=""><img alt="Tower-London" border="none"
src=
"http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
title="Right-click here to download pictures"
width=""></a>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href=
"https://www.facebook.com/towerlondonfootwear"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="https://twitter.com/TowerLondon"
style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href="http://instagram.com/towerlondon"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
</tr>
</tbody>
</table><!-- End of Row 7 -->
<!-- Row 7 -->
<table align="center" bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="http://www.tower-london.com/" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
</html>
如果一个好心灵可以帮助我整理这个烂摊子，我会永远感激不尽！
答案 0 :(得分：0)
我已改为tbody to table＆amp;添加表的属性
<body bgcolor="#F0F0F0" style=
"border-collapse: collapse; border-spacing: 0; width: 100% !important; height: 100% !important; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #000000; min-width: 100%; background-color: #ffd530; margin: 0; padding: 0;"
text="#000000">
<style type="text/css">
a:hover { color: #127DB3 !important; }
.footer a:hover { color: #999999 !important; }
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
width="100%">
<tr>
<td align="center" bgcolor="#FFD530" style=
"border-collapse: collapse !important; border-spacing: 0; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0;"
valign="top">
<!-- WRAPPER -->
<!-- Set wrapper width (twice) -->
<table align="center" border="0" cellpadding="0" cellspacing=
"0" style=
"border-collapse: collapse !important; border-spacing: 0; width: inherit; max-width: 600px; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0;"
width="560">
<tr>
<td align="center" style=
"border-collapse: collapse !important; border-spacing: 0; width: 100%; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; margin: 0; padding: 0px 6.25% 20px;"
valign="top"></td>
<td style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
</td>
</tr>
<tr>
<td></td>
</tr>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href=
"http://www.tower-london.com/delivery-options/"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #127DB3;"
title=""><img alt="Tower-London" border="none"
src=
"http://www.tower-london.com/media/custom/newsletter/template2/Free.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"
title="Right-click here to download pictures"
width=""></a>
</td>
</tr>
</tbody>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/followus.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href=
"https://www.facebook.com/towerlondonfootwear"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/facebook.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="https://twitter.com/TowerLondon"
style="-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/twitter.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top" width="">
<a href="http://instagram.com/towerlondon"
style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/instagram.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top"><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/towerlogo.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></td>
</tr>
</tbody>
</table><!-- End of Row 7 -->
<!-- Row 7 -->
<table align="center" bgcolor="white" border="0" cellpadding="0" cellspacing="0" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;">
<tbody>
<tr>
<td bgcolor="white" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; border-spacing: 0;"
valign="top">
<a href="http://www.tower-london.com/" style=
"-webkit-font-smoothing: antialiased; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; line-height: 100%; color: #999999;"
title=""><img alt="" border="none" src=
"http://www.tower-london.com/media/custom/newsletter/template/website.jpg"
style=
"display: block; line-height: 100%; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; border: 0;"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>