我正在尝试为电子邮件创建以下设计:
<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
<tr bgcolor="pink">
<td align="left" width="50%" height="40px">
Left Column Text
</td>
<td align="right" width="50%" height="40px">
Right Column Text
</td>
</tr>
</table>但是，例如将上表从 Outlook 转发到 Gmail 时，它不起作用。
当我从 Outlook 转发这封电子邮件时，它会向 <td> 添加额外的元素。 s:
<td align="left" width="50%" height="40px">
<p align="right" style="text-align:right;">
<span dir="RTL"> Some Text </span>
</p>
</td>
它使两列上的文本都向右对齐。为什么？
这是从 Outlook 转发到 Gmail 时的样子:(请注意，在下面的示例中，我手动将左列更改为 align="right" 只是为了模仿该行为)
<table align="center" width="600" border="0" cellpadding="10" cellspacing="0">
<tr bgcolor="pink">
<td align="right" width="50%" height="40px">
Left Column Text
</td>
<td align="right" width="50%" height="40px">
Right Column Text
</td>
</tr>
</table>最佳答案
在 Outlook 中，您必须使用静态像素。解决方案是专门为 Outlook 创建一个内部表，该表不会向其他电子邮件客户端显示。您将在下面找到电子邮件客户端的起点。
对所有元素进行内联样式(在元素标记中)非常重要，因为某些电子邮件客户端会删除 <head> 中的样式。部分。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="border:none;" xmlns:v="urn:schemas-microsoft-com:vml" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title></title>
<style type="text/css">
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
#outlook a { padding: 0px; }
</style>
<!--[if (mso)]>
<style type="text/css">
td { font-family: helvetica, arial, sans-serif !important; }
</style>
<![endif]-->
<base target=_blank>
</head>
<body bgcolor="#ffffff" style=" -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; margin:0; padding:0; width:100%" width="100%">
<table style="-premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0" cellpadding="0" cellspacing="0">
<tr>
<td style="border-spacing:0; margin:0; padding:0 20px">
<!--[if (mso)]>
<table id="outlook" width="474" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse; table-width:fixed;" align="center">
<tr>
<td class="outlooktd" style="width:474px !important;">
<![endif]-->
<table width="100%" id="mastbody" border="0" cellspacing="0" cellpadding="0" dir="ltr" style=" -premailer-cellpadding:0; -premailer-cellspacing:0; border-collapse:collapse; border-spacing:0; color:#444; font-family:Helvetica, Arial, sans-serif; font-weight:300; margin:0 auto; mso-table-lspace:0; mso-table-rspace:0">
<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>
<!-- here your email content -->
<tr>
<td bgcolor="#ffffff" style="border-spacing:0; margin:0; padding:0">
</td>
</table>
<!--[if (mso)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
关于html - 如何创建与所有电子邮件提供商兼容的左侧文本和右侧文本的行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/75879673/