我正在嘗試個性化來自 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>
uj5u.com熱心網友回復：
HTML 電子郵件不支持很多現代 CSS，例如 flex，也不支持 SVG 影像。
檢查https://caniemail.com了解您可以使用的內容。
您也不能使用 JavaScript - 將 onclick 事件更改為 URL。
您可以將 div 用于單列布局，但您仍然需要一個用于 Outlook 的外部表，因為它不支持 max-width 并且通常不適用于 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/408746.html
標籤：