时间戳

首页 > 解决方案 > 在 Chrome Dev 浏览器中打开的 HTML 格式的电子邮件模板看起来很疯狂

html - 在 Chrome Dev 浏览器中打开的 HTML 格式的电子邮件模板看起来很疯狂

问题描述

我正在准备用于重置密码的邮件模板。我正在使用纯 HTML 为其内嵌样式设置样式。我在 Chrome 或 Outlook 中的 GMAIL 中打开它，它看起来不错，但是当我通过 chrome dev 打开它时，它变得疯狂。

这是我的代码：

  <!DOCTYPE html>
<html
    lang="en"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:o="urn:schemas-microsoft-com:office:office"
>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <meta name="x-apple-disable-message-reformatting" />
        <title>Reset password Email</title>
        <!--[if mso]>
            <noscript>
                <xml>
                    <o:OfficeDocumentSettings>
                        <o:PixelsPerInch>96</o:PixelsPerInch>
                    </o:OfficeDocumentSettings>
                </xml>
            </noscript>
        <![endif]-->
        <style type="text/css">
            table {
                font-family: 'Poppins';
            }
        </style>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
            rel="stylesheet"
        />
    </head>
    <body style="margin: 0; padding: 0">
        <table
            role="presentation"
            cellpadding="0"
            cellspacing="0"
            width="412"
            height="436"
        >
            <tr
                style="
                    display: block;
                    position: relative;
                    background-color: #ffffff;
                "
            >
                <td
                    style="
                        position: absolute;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 18px;
                        width: 130px;
                        height: 18px;
                        margin: 64px 0 0 53px;
                    "
                >
                    Zapomniałeś hasła ?
                </td>
                <td
                    class="longText"
                    style="
                        position: absolute;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 18px;
                        width: 313px;
                        margin: 96px 0 0 53px;
                    "
                >
                    Aby zresetować hasło, proszę kliknij poniższy link:
                </td>
                <td
                    style="
                        position: absolute;
                        font-weight: 500;
                        font-size: 12px;
                        line-height: 18px;
                        letter-spacing: -2%;
                        width: 160px;
                        height: 30px;
                        border-radius: 3px;
                        margin: 121px 0 0 51px;
                        background-color: #232835;
                        display: table-cell;
                        text-align: center;
                        vertical-align: middle;
                    "
                >
                    <a
                        href="#"
                        style="
                            text-decoration: none;
                            color: #ffffff;
                            line-height: 30px;
                            background-color: #232835;
                        "
                        >RESETUJ HASŁO</a
                    >
                </td>
                <td
                    class="longText"
                    style="
                        position: absolute;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 18px;
                        width: 316px;
                        height: 18px;
                        margin: 164px 0 0 53px;
                    "
                >
                    W razie problemów skontaktuj się z administratorem
                </td>
                <td
                    style="
                        position: absolute;
                        font-weight: 500;
                        font-style: normal;
                        font-size: 12px;
                        line-height: 18px;
                        width: 140px;
                        height: 54px;
                        margin: 191px 0 0 53px;
                        display: flex;
                        align-items: center;
                    "
                >
                    Imię Nazwisko <br />
                    500 500 500 <br />
                    admin@nevomo.com
                </td>
                <td
                    style="
                        position: absolute;
                        font-weight: 400;
                        font-size: 12px;
                        line-height: 18px;
                        width: 84px;
                        height: 18px;
                        margin: 262px 0 0 53px;
                    "
                >
                    Pozdrawiamy,
                </td>
                <td>
                    <img
                        src="nevomo_logo_orange.png"
                        style="
                            position: absolute;
                            display: block;
                            width: 112.17px;
                            height: 15.74px;
                            margin: 292.13px 0 0 56.42px;
                            color: #eb5d1c;
                        "
                        alt="logo"
                    />
                </td>
                <td
                    style="
                        position: absolute;
                        font-weight: 400;
                        font-size: 11px;
                        line-height: 16.5px;
                        width: 206px;
                        height: 51px;
                        margin: 321px 0 0 53px;
                    "
                >
                    ul.Mińska 63A lok.245 <br />
                    03-828 Warszawa <br />
                    www | facebook |instagram | linkedin
                </td>
            </tr>
        </table>
    </body>
</html>

这就是它的样子。所有这些都应该在下一个之下，等等。 在此处输入图像描述

我应该添加什么以使其正常工作？

谢谢

标签： htmlcss

解决方案

推荐阅读