You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

桌面端Outlook无法渲染邮件td及p标签的内边距与字体样式

桌面端Microsoft Outlook样式渲染异常问题

我绞尽脑汁也找不到桌面端Microsoft Outlook无法渲染letter-text类td标签及p标签样式的原因。文本显示时没有外边距、内边距,也不应用指定字号。我知道这和表格嵌套不正确有关,但盯着代码看了好久还是没找到问题。感谢提供任何帮助,为保密已移除两张图片的href。

CSS样式代码

<style type="text/css">
    table {
      border-spacing: 0;
    }
    td {
      padding: 0;
    }
    p {
      font-size: 15px;
    }
    img {
      border: 0;
      border-width: 0;
    }
    a {
      color: #277fd2;
      text-decoration: none;
    }

    .first-text {
      border-top: 20px solid #ffffff;
      border-right: 30px solid #ffffff;
      border-left: 30px solid #ffffff;
    }

    .second-text {
      border-right: 30px solid #ffffff;
      border-left: 30px solid #ffffff;
      border-bottom: 15px solid #ffffff;

</style>

相关HTML代码片段

<tr>
  <td>
    <table
      align="left"
      role="presentation"
      width="100%"
      style="text-align: left; width: 100%; border-spacing: 0"
    >
      <tbody>
        <tr>
          <td class="side-images" align="left">
            <img
              src="REALHREFINREALLIFE"
              width="55"
              style="max-width: 55px; width: 100%; display: block; margin: 0"
            />
          </td>

          <td
            class="letter-text first-text"
            style="width: 81.67%; background-color: #ffffff"
          >
            <p
              style="
                margin: 0;
                font-size: 12.6px;
                font-family: Helvetica, Arial, sans-serif;
                line-height: 18px;
                padding-bottom: 8px;
              "
            >
              Dear {{Recipient.PreferredFirstName__c}}{{#if
              Recipient.PreferredFirstName__c}}{{else}}{{Recipient.FirstName}}{{/if}},
            </p>

            <p
              style="
                margin: 0;
                font-size: 12.6px;
                line-height: 18px;
                font-family: Helvetica, Arial, sans-serif;
                padding-bottom: 8px;
              "
            >
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste
              exercitationem sint fugit, atum ratione ea laboriosam sed!
            </p>

            <p
              style="
                margin: 0;
                font-size: 12.6px;
                line-height: 18px;
                padding-bottom: 8px;
              "
            >
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iste
              exercitationem sint fugit, atum ratione ea laboriosam sed!
            </p>
          </td>
          <td class="side-images">
            <img
              src="SIDEIMAGE (real href in real life)"
              width="55"
              style="max-width: 55px; width: 100%; display: block"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </td>
</tr>

已尝试的解决方法

  • 将padding改为border
  • 调整表格嵌套方式,但均无效果

内容的提问来源于stack exchange,提问作者Email Developer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.18 00:55:28