Firebase 电子邮件 formatting/styling 不工作
Firebase email formatting/styling not working
我正在尝试个性化来自 firebase 的重设密码电子邮件模板。
它应该看起来像这样：
但它看起来像这样：
我试过使用标签，但没有用，所以我将样式单独放在每个元素中，它有点像一封电子邮件，但现在完全坏了，好像它没有阅读flow-direction: 列，但在浏览器中看到它的样式看起来不错，有人知道发生了什么吗？
这是我在消息中输入的代码
<!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 电子邮件不支持很多现代 CSS，例如 flex，也不支持 SVG 图像。
检查 https://caniemail.com 您可以使用的内容。
您也不能使用 JavaScript - 将 onclick 事件更改为 URL。
您可以将 div 用于单列布局，但您仍然需要一个用于 Outlook 的外部 table，因为它不支持最大宽度并且通常不能很好地与 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
我正在尝试个性化来自 firebase 的重设密码电子邮件模板。
它应该看起来像这样：
但它看起来像这样：
我试过使用标签，但没有用，所以我将样式单独放在每个元素中，它有点像一封电子邮件，但现在完全坏了，好像它没有阅读flow-direction: 列，但在浏览器中看到它的样式看起来不错，有人知道发生了什么吗？
这是我在消息中输入的代码
<!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 电子邮件不支持很多现代 CSS，例如 flex，也不支持 SVG 图像。
检查 https://caniemail.com 您可以使用的内容。
您也不能使用 JavaScript - 将 onclick 事件更改为 URL。
您可以将 div 用于单列布局，但您仍然需要一个用于 Outlook 的外部 table，因为它不支持最大宽度并且通常不能很好地与 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