需要在Windows Outlook中渲染的网页代码编写
2023-09-26 本文已影响0人
张林建
当我们通过代码以html的格式发送邮件时，我们会发现在有些情况下，我们发送的html网页在Windows Outlook客户端上无法正常渲染，样式和布局可能并没有按照我们预想的方式进行渲染，例如当我们使用Flex布局时。
以下代码可以在iPhone上的Mail应用，Mac的Outlook客户端中正常展现，但是在Windows Outlook中会呈现错乱的布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div style="display: flex; flex-direction: column; box-shadow: 0 0 20px #55555555">
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #1196FF; padding: 10px 20px">
<span style="color:white">XXXXXX</span>
<span style="color:white; margin-top:10px">XXXXXXXXXXX</span>
</div>
<div style="display:flex; flex-direction: column; background-color: #fff; padding:20px 20px">
<span>XXXXXXXX,</span>
<br />
<span>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<br />
<span>XXXXX.</span>
<span>XXXXXXXXXXXXXXX.</span>
</div>
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #5B5B5B; padding: 10px 10px">
<span style="color:#fff;font-size:10px">XXXXXXXXXXXX</span>
<span style="color: #fff; font-size: 10px">XXXXXXXXX</span>
<span style="color: #fff; font-size: 10px">XXXXXXXXXXXXXXXXXXXXX</span>
</div>
</div>
</body>
</html>
我们可以通过改为table方式的布局，使网页适应Windows Outlook客户端，与上面对应的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" style="width: 100%; box-shadow: 0 0 20px #55555555">
<tbody>
<tr>
<td style="background-color: #1196FF; padding: 10px 20px">
<p style="color: #fff;margin:0;padding:0 0; text-align:center">XXXXXX</p>
<p style="color: #fff; margin: 0; padding: 0 0; margin-top: 8px; font-size:18px; font-weight:bold; text-align: center">XXXXXXXXXXX</p>
</td>
</tr>
<tr>
<td style="background-color: #fff; padding: 20px 20px">
<p style="margin:0">XXXXXXXX,</p>
<p style="margin:0;margin-top:10px">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<p style="margin: 0; margin-top: 10px">XXXXXX.</p>
<p style="margin:0">XXXXXXXXXX.</p>
</td>
</tr>
<tr>
<td style="background-color: #5B5B5B; padding: 10px 10px">
<p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center ">XXXXXXXXXXXXXXXX</p>
<p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center">XXXXXXXXX</p>
<p style="color: #fff; font-size: 10px; margin: 0; padding: 0 0; text-align: center">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
