Question

我继承了这半完成的电子邮件简报模板，但是我在编码技巧方面遇到了很多问题，因为我们始终在所有各种电子邮件客户端中保持页眉和页脚的一致性。对于初学者来说，页脚没有像标题那样正确对齐，它会在顶行和底部图像之间保持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>

如果一个好心灵可以帮助我整理这个烂摊子，我会永远感激不尽！

Answer 1

我已改为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>

https://jsfiddle.net/78aw8jkm/

电子邮件客户端的电子邮件新闻稿页眉和页脚对齐

1 个答案: