展望中的白线
我正在尝试为我们的慈善机构设计一些新的 html 电子邮件签名，这些签名将在 Outlook 中使用 - 但是由于某种原因，在将签名添加到 Outlook 时，构成签名的两个底部图像之间出现了一条 1px 的白线，当你打开它时，例如，就可以了。Safari / Chrome。有人可以帮忙吗？
谢谢
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="649" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td rowspan="3">
<div style="height:200px">
<img src="https://i.ibb.co/hfgS2Y0/Idea-1-01.jpg" width="492" height="200" alt=""></td>
<td>
<a href="http://www.ygam.org"><img src="https://i.ibb.co/4V8fjdf/Idea-1-02.jpg" alt="Idea-1-02" width="42" height="44" alt=""></a></td>
<td>
<a href="https://www.linkedin.com/company/young-gamblers-education-trust/about/"><img src="https://i.ibb.co/xsv5cFM/Idea-1-03.jpg" width="36" height="44" alt=""></a></td>
<td>
<a href="https://www.facebook.com/YGAMuk/"><img src="https://i.ibb.co/tqN4kc1/Idea-1-04.jpg" width="34" height="44" alt=""></a></td>
<td>
<a href="https://twitter.com/YGAMuk"><img src="https://i.ibb.co/wyr3QB8/Idea-1-05.jpg" width="45" height="44" alt=""></a></td>
</tr>
<tr>
<td colspan="4">
<img src="https://i.ibb.co/3TsGJC2/Idea-1-06.jpg" width="157" height="56" alt=""></td>
</tr>
<tr>
<td colspan="4">
<a href="http://www.ygam.org"><img src="https://i.ibb.co/BT6MZ7N/Idea-1-07.jpg" width="157" height="100" alt=""></a></td>
</tr>
</table>
</body>
</html>问题
在查看 HTML 电子邮件时，Outlook 可怕的白线通常水平出现在文本块、图像或表格下方。在文本或块元素的边缘也可以使用垂直白线。只有 Windows 版本的 Outlook 受到影响。
<table style="background-color: #cccccc"><tr><td>This is<br>some text.</td>
<td><table><tr><td>More text<td></tr><tr><td>over here.</td></tr></table></td></tr>
<tr><td>More text down here.</td></tr></table>
Outlook 在将功能缩放到屏幕像素时计算功能尺寸的方式似乎存在错误。我推测 Outlook 正在计算包含小数部分的宽度或高度值，该值在 Outlook 处理的某个地方被错误地舍入。它在屏幕渲染中创建一个 1 像素的间隙，允许背景颜色显示出来。
白线的出现是很难预测的。它取决于 HTML，还取决于文本和其他元素在用户屏幕上的换行方式，以及用户的 Outlook 和 Windows 设置。如果您想折磨您的 HTML，请尝试将 Outlook 的缩放设置更改为 101% 到 124% 范围内的值，您很快就会发现一些可能出现白线的地方。
解决方案
HTML 设计者不能总是避免 Outlook 中的白线，因为它的缩放取决于用户的设置。但是，您可以通过遵循以下几条规则来避免大多数用户出现白线：
- 对于所有文本，将行高值设置为 4px 的倍数。必须包含空格。为了确保包含所有文本并且 Outlook 使用您声明的确切 px 值，我建议像这样创建每个表格：
<table style="mso-line-height-rule: exactly; line-height: 16px">
然后在块元素上设置 4px 的较大行高倍数，例如tr或任何td需要更大字体的地方，例如，
<td style="mso-line-height-rule: exactly; line-height: 24px; font-size: 20px">
通常您行高大约是字体大小的 1.25 倍。 - 将所有其他宽度和高度值设置为 4px 的倍数。其中包括边框、内边距、边距以及图像的宽度和高度。有一些可能的例外情况：
- 仅作为其他表的容器并且没有自己的文本或图像的表不需要限制为 4px 的倍数。
- 如果元素同一侧的边框和内边距相加为 4px 的倍数，则它们不必是 4px 的倍数。例如，
<a style="border-top:1px solid black; padding-top:3px">
<table style="border-top:1px solid black; padding-top:2px">
（是的，1+2=4，这要归功于另一个 Outlook 错误，该错误将表格的边框厚度添加到该侧的填充中。）
当 Outlook 的缩放设置为 100% 且 Windows 的显示缩放设置为内置值之一（均为 25% 的倍数）时，这些规则可防止出现白线。
怎么运行的
Outlook 通过缩放设置和 Windows 显示缩放系数直接将文本、边框、边距、填充和图像缩放到屏幕像素。将特征尺寸设置为 4 像素的倍数可确保当 Outlook 的缩放为 100% 且 Windows 的显示缩放系数为 25% 的倍数时，计算的屏幕尺寸为整数像素。避免小数屏幕像素尺寸可以避免 Outlook 错误地四舍五入的错误。当然，0px对于任何缩放设置或显示缩放系数，它都是一个神奇的值，它始终缩放为整数。
我确信还有更多的例外和微妙之处有待发现，而且我不能保证这会修复所有白线。但此解决方案适用于我的 HTML 的各种 Outlook 版本和 Windows 显示设置。我测试了 Outlook for Microsoft 365 版本 2208、Outlook 2021、Outlook 2019、Outlook 2016、Windows 10 邮件和 Windows 11 邮件。亲自尝试一下，让我们知道它是否有效。
Outlook 中的行高
Outlook 会根据行中的字符以及每个字符的字体、样式和字体大小自动计算每行所需的高度。对于普通文本，计算出的行高通常约为字体大小的 1.25 倍（大字体则较小），但如果存在异常高的字符（U+FF5C 等特殊字符和一些非拉丁文字），则行高可能会更大）。如果文本有边框，则行高可以更大以适应边框和内边距的厚度。计算出的行高几乎从来不是像素的整数，并且它可能因行而异。
当您未声明行高时，Outlook 将使用它计算出的行高。
当您将行高声明为百分比时，Outlook 会缩放按百分比计算的行高。
在 Outlook 的默认 mso-line-height-rule 下at-least，当您声明以 px 为单位的行高时，Outlook 会将计算出的值与您声明的值进行比较。仅当您声明的值至少与 Outlook 计算的值一样大时，才会使用该值。换句话说，默认情况下，行高 px 声明只能使行更高。
当您在mso-line-height-rule: exactly以 px 为单位的行高声明之前进行声明时，Outlook 将使用您声明的确切 px 值。但请注意，如果您声明的行高比 Outlook 计算的高度短，则该行可能会被向下推，因此它不会垂直居中，或者如果行高比字体小得多，甚至会在顶部被切断 -尺寸。
mso-line-height-rule 的继承是不可靠的，所以我建议直接在每个 line-height 之前声明它。行高声明仅在块元素上声明时才有效。
mso-line-height-rule: exactly当与 4px 倍数的行高值一起使用时，是避免 Outlook 白线错误的最快、最简单的方法。但我建议仅当文本在您的控制之下时才使用此选项，因为存在格式错误的风险。
默认的 mso-line-height-rule 的“至少”对于一般格式来说是万无一失的，但当您试图防止 Outlook 的白线错误时，这是一个比较棘手的选项。为了防止使用此选项出现白线，您需要确保声明的行高 px 值是 4px 的倍数，并且大于 Outlook 计算的行高。对于大多数普通文本来说，声明行高大于字体大小的 1.25 倍就足够了，但同样，这取决于行中的具体内容。为了确定这一点，您需要使用特定文本且没有行高声明来测试 Outlook，并测量屏幕上呈现的行的像素高度。
尝试使用显式空格
在 Outlook 的某些特定版本中（例如 2016 和 2019），每当元素上出现奇怪的 1px 边框时，请尝试在 相关父项关闭之前添加一个空格，方法是使用 ,强制添加空格</td>。显然，这假设您尚未在其他地方设置边框（通过 table props 或 css）。
例如，这个修复对我有用......
失败：元素底部可能会出现一条奇怪的 1px 线：
... my link</a></td>
作品：没有出现奇怪的线：
... my link</a> </td>
这与某些版本的 Outlook 如何处理代码中的空格有关。</a>在上面的原始代码（示例 A）中，显然和之间直接没有空格</td>，所以我怀疑问题超出了封闭范围td，并且周围代码的结构和/或空格很重要。如果是这种情况，那么使用 （示例 B）只是一种快速修复方法，无需重新构建代码。或者，通过预处理器优化（压缩）代码并看看会发生什么。
顺便说一句，使用主要的测试平台，所有其他电子邮件客户端（+40 正在测试）似乎对额外的 到位没有问题。