现在让我们看看如何修复这些细

mdruhul13

这很糟糕。这太烦人了。胞。我们解决这个问题的方法是添加 role=presentation 属性。这不是从一个表读取到另一个表的内容，因此每当我们有一个新表时，我们都需要添加此属性。我们这里有一些嵌套表，所以我们将添加一些。结果听起来是这样的。

屏幕阅读器：空白。空白的。画外音关闭。

雷米·帕门蒂埃：这好多了。这更加流畅，并且带来了更好的体验。我希望这能让您相信，您应该始终尽可能少地使用表，但如果您这样做，请在这些表上使用 role=presentation 属性。

雷米·帕门蒂埃：现在，我们可以更进一步的一步是，由于表格主要用于 Outlook，因此我们可以使用条件注释使这些表格仅在 Outlook 上可见。条件注释实际上在 Internet Explorer 中也可用，直到我认为是 I9。有了这些，如果 MSO 是文本形式，我们可以告诉边界该条件注释中的所有以下内容将仅适用于 MSO 客户端，因此主要是 Outlook。

雷米·帕门蒂埃：然后，在这些开始和结束表格注释之间，我们可以有一个带 阿联酋电话号码列表 有角色或内容的 div，就像常规 Web 边框一样，尽管 webmails 将选择 div，Outlook 将选择表格。这是我收到大部分电子邮件的视频。

雷米·帕门蒂埃：现在另一个好的小习惯是使用边距或填充来实现间距。这主要是为了避免空容器，像这样的空单元格，我们在高度为 20 的单元格中扮演一个角色，然后我们有宽度为 20 的 TD 来创建边距以及这些内容。我仍然看到很多这样的事情发生，这使得你的代码变得非常非常重。它的可读性较差，在我看来它真的很糟糕。

雷米·帕门蒂埃：执行此类操作的正确方法是，如果您愿意，也可以使用表格，并在第一个 TD 上使用填充样式，然后在内部使用边距在彼此之间分隔标签。这在每个流行的图像客户端和 Outlook 中都非常有效。

雷米·帕门蒂埃：Outlook 和 Windows 中可能出现的一个小问题是背景颜色。如果您在任何带有边距的元素上使用背景颜色，它实际上会穿过边距。在下面的示例中，我应该在红色背景和蓝色背景之间留出边距，但在 Outlook 中，边距实际上与该元素的背景颜色相同。在这些情况下，解决方案可能是使用另一个表格并将您的内容像这样嵌套到空间元素中，但如果您不使用背景，那么即使在 Outlook 中，边距也非常安全。



雷米·帕门蒂埃：最后，这可能是我最喜欢的推荐。这是为了让它在没有样式标签的情况下工作。这不一定是关于原始 HTML 渲染，而是考虑渐进增强和优雅降级，以及如果没有此指南，您的电子邮件将是什么样子。这在网络合作中是非常不寻常的，因为它不会发生在网络上，但没有样式标签实际上在电子邮件客户端上经常发生。

雷米·帕门蒂埃：首先，并非所有电子邮件客户端都支持样式标签。也许我看到的最常见的例子之一是 iOS 和 Android 上的移动应用程序上的 Gmail，它允许您配置第三方电子邮件地址。您可以在 Gmail 应用程序中使用您的 Yahoo 或 Outlook.com 地址。如果您这样做，那么您检查的每封电子邮件都将不支持样式标签。这就是电子邮件极客为使用非 Gmail 帐户的 Gmail 应用程序命名的 ANGA。这是一种很常见的情况。

雷米·帕门蒂埃：然后，您有很多小型或本地或国际电子邮件客户端的案例，例如法国的 SFR 或俄罗斯的 Yandex 和 Mail.ru 等。即使到今天，仍有很多电子邮件客户端不支持样式标签，因此如果您想让代码更加健壮，请确保它可以在没有样式标签的情况下工作。