时间戳

首页 > 解决方案 > 电子邮件 HTML 边框覆盖内容，而不是单元格？

html - 电子邮件 HTML 边框覆盖内容，而不是单元格？

问题描述

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td style="border:2px solid #ffffff; padding: 8px 10px;  border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px;  text-decoration:none;">
    <h3 style="color:#FFFFFF;font-family:Arial, Helvetica, sans-serif;font-size:16px;font-style:normal;font-weight:bold;line-height:150%;letter-spacing:2px;text-decoration:none;text-align:center;">
      <a alias="" conversion="false" data-linkto="https://" href="google.com" style="color:#ffffff;text-decoration:none; " title="Book Appointment">
        <span>BOOK AN APPOINTMENT<br> 
          TO VISIT US TOMORROW</span></a>
    </h3>
    </td>
  </tr>
</table>

无论我在哪里添加边框样式，它总是包裹整个单元格，而不是单元格内容本身。

代码如下：

SE1

如果我将它添加到 span 元素上，它会完全破坏边框，如下所示：

SE2

这就是我需要的样子：

SE3

我在这里做错了什么？

标签： htmlcssemailhtml-tablehtml-email

解决方案

这相当简单，并且将在所有电子邮件客户端中始终如一地工作。

单行文字：

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="" style="margin: auto;">
  <tr>
    <td style="text-align: center;">
      <h3 style="margin: 0;"><a href="#" style="border: 2px solid #ffffff; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; padding: 20px 30px; color: #ff0000; display: block; letter-spacing: 2px;">Book An Appointment<br />To Visit Us Tomorrow</a></h3>
    </td>
  </tr>
</table>

两行文字：

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="260" style="margin: 0; border: 2px solid #ff0000;">
  <tr>
    <td style="background: #222222; border: 8px solid #222222; text-align: center;">
      <div style="padding: 10px 15px;">
        <a href="#" style="background: #222222; border: 1px solid #222222; font-family: sans-serif; font-weight: bold; font-size: 16px; line-height: 22px; text-decoration: none; color: #ffffff; display: block; letter-spacing: 2px; mso-line-height-alt: 22px;">Book An Appointment To Visit Us Tomorrow</a>
      </div>
    </td>
  </tr>
</table>

除非您需要<h3>屏幕阅读器，否则我建议将其删除。

祝你好运。

推荐阅读