Firebase 电子邮件格式/样式不起作用答案

【问题标题】：Firebase email formatting/styling not workingFirebase 电子邮件格式/样式不起作用
【发布时间】：2022-01-10 21:47:30
【问题描述】：

我正在尝试个性化来自 firebase 的重置密码电子邮件模板。

它应该看起来像这样：

但它看起来像这样：

我已经尝试过使用标签，但没有成功，所以我将样式单独放在每个元素中，它有点像一封电子邮件，但现在完全坏了，似乎它没有阅读流程-方向：列，但是在浏览器中看到它的样式看起来不错，有人知道发生了什么吗？

这是我在消息中输入的代码

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recover Password Email</title>
</head>
<body style="font-family: 'Poppins', sans-serif;box-sizing: border-box;margin: 0;padding: 0;background: #fff; display: flex; flex-direction: column;justify-content: center;align-items: center;height: 100vh;text-align: center;">
    <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@300;400;500;700;800&display=swap" rel="stylesheet">
    <img src="https://tutorstripe.netlify.app/image.svg" alt="Fingerprint Icon" style="width: 100%;max-width: 70px;margin: 0 auto;"/>
    <h1 style="font-size: 2rem;font-weight: 700;margin: 0;padding: 0;color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;">¡Hola, Lucas!</h1>
    <p class="message" style="font-size: 0.75rem;font-weight: 400;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
        Recibes este correo porque nos notificaron que olvidaste tu contraseña, desafortunadamente nosotros tampoco sabemos cuál es tú contraseña ????, toda la información sensible que recibimos de ti esta encriptada ???? para mantenerte seguro.
        <br><br>
        Pero no hay de qué preocuparse ????, para recuperar el acceso a tú cuenta puedes cambiar la contraseña y podrás seguir usando nuestra aplicación de inmediato
    </p>
    <p class="warning" style="font-size: 0.6rem;font-weight: 500;padding-left: 8vw;padding-right: 8vw;color: #000;margin-top: 1rem;margin-bottom: 1rem;">
        ???? Si tú no solicitaste restablecer tu contraseña puedes ignorar este correo ????
    </p>
    <button onclick="window.open('%LINK%')" style="padding: 0.5rem 2rem;border-radius: 0.25rem;background-color: #486EFF;margin-top: 1rem;margin-bottom: 1rem;cursor: pointer;outline: none;border: none;color: #fff;font-size: 0.9rem;font-family: 'Poppins';font-weight: 600;">
        Cambiar contraseña
    </button>
    <h3 style="font-size: 0.7rem;font-weight: 500;margin: 0;padding: 0;color: #000;margin-top: 1rem;margin-bottom: 1rem;text-decoration: underline;">Attentamente</h3>
    <h2 style="font-size: 0.75rem;font-weight: 600;margin: 0;padding: 0;color: #486EFF;margin-top: -0.8rem;margin-bottom: 1rem;">El frutifantástico equipo de Tutor</h2>
    <br><br><br>
    <div class="footer" style="background: #486EFF;width: 100vw;display: flex;flex-direction: column;justify-content: center;align-items: center;color: #fff;position: fixed;bottom: 0;">
        <p class="copyright" style="font-size: 0.6rem;font-weight: 300;margin: 0;padding: 0;color: #fff;margin-top: 1rem;margin-bottom: -1rem;">© 2022 Tutor. Todos los derechos reservados</p>
        <h4 style="font-size: 0.8rem;font-weight: 700;opacity: 0.6;">Tutor</h6>
    </div>
</body>
</html>

【问题讨论】：

标签： html firebase firebase-authentication html-email

【解决方案1】：

HTML 电子邮件不支持很多现代 CSS，例如 flex，也不支持 SVG 图像。

查看https://caniemail.com 了解您可以使用的内容。

您也不能使用 JavaScript - 将 onclick 事件更改为 URL。

您可以将 div 用于单列布局，但您仍然需要一个用于 Outlook 的外部表，因为它不支持最大宽度并且通常不适用于 div。

外部结构示例：

<div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->

..Content here..

<!--[if (gte mso 9)|(IE)]>
            </td>
            </tr>
            </table>
            <![endif]-->
        </div>

看起来你需要一个 HTML 电子邮件的入门知识，或者如果你不想想太多，可能需要一个框架，我推荐这个资源页面：https://emailresourc.es/#code-frameworks

【讨论】：