Gmail 的自定义电子邮件签名模板

问题描述 投票：0回答：1

已经为 Gmail 开发了一个自定义电子邮件签名模板，但是当我复制过去的 HTML 输出并将其保存在 Gmail 上时，我发现一个 1px 的图像边框间隙，并且无法解决它。有人帮助我如何解决以下问题，我也使用了负边距，但我无法修复它！

Gmail 上的签名模板

gmail signature template

签名模板代码 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>HTML + CSS</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <div style="
        font-family: Arial, sans-serif;
        color: #333333;
        width: 400px;
        padding: 10px;
        background-repeat: no-repeat;
        background-size: cover;
      ">
    <div style="margin-bottom: 10px">
      <div style="display: flex; align-items: center; gap: 10px">
        <div style="
              width: 25px;
              height: 25px;
              background-color: #005599;
              color: #005599;
            ">
          .
        </div>
        <div style="font-size: 13px; font-weight: bold; color: #005599">
          Omar Al Jabir
        </div>
        <div style="
              font-size: 12px;
              color: #ffffff;
              background-color: #005599;
              padding: 5px 15px;
              min-width: 150px;
              text-align: center;
            ">
          Business Development Manager
        </div>
      </div>
    </div>
    <div style="display: flex">
      <img style="border-right: 1px solid #1186c8" src="https://i.imgur.com/bvDQt2e.png" alt="gplex" />

      <div style="
            background-color: #1186c8;
            color: #ffffff;
            font-size: 10px;
            line-height: 1.2em;
            width: 210px;
            padding: 10px 5px;
            margin-left: -3px;
          ">
        <div>
          <p style="margin-bottom: 5px; font-size: 14px">
            Genuity Systems Ltd.
          </p>
          <p style="margin: 0">Genusys Point</p>
          <p style="margin: 0">Plot-8, Road-4, Block-A, Section 11</p>
          <p style="margin: 0">Mirpur, Dhaka -1216 Bangladesh</p>

          <table border="0" cellpadding="1px" cellspacing="0">
            <tr>
              <td>Telephone</td>
              <td>:</td>
              <td>+(880) 9611 888 444</td>
            </tr>
            <tr>
              <td>Mobile</td>
              <td>:</td>
              <td>+8801713364648</td>
            </tr>
            <tr>
              <td>Web</td>
              <td>:</td>
              <td style="color: #ffffff">www.genuitysystems.com</td>
            </tr>
          </table>
        </div>
      </div>
    </div>

    <div style="
          background-color: #1186c8;
          width: 400px;
          padding: 5px;
          border-top: 1px solid #1186c8;
          margin-top: -2px;
          display: flex;
          align-items: center;
        ">
      <div>
        <a href="https://facebook.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/LVVC5Lb.png" alt="" />
        </a>
        <a href="https://youtube.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/zunod2B.png" alt="" />
        </a>
        <a href="https://instagram.com" target="_blank" style="text-decoration: none; margin-right: 10px">
          <img src="https://imgur.com/6Z3TdL5.png" alt="" />
        </a>
        <a href="https://whatsapp.com" target="_blank" style="text-decoration: none">
          <img src="https://imgur.com/zunod2B.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</body>

</html>

html css gmail
1个回答
0
投票

所以我来解决你的问题。

使用表格布局的第一步。

下一步是向 

td
嵌套的 
img
添加背景颜色。这可以防止显示白色边框。 但是您使用的图像似乎大部分都有透明背景。因此除此之外，为图像本身添加白色背景可能会有所帮助。

此外，我还添加了一些 MSO 特定样式，可以防止某些行为。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>HTML + CSS</title>
    <!--[if mso]>
    <style>
  .outlook-image {
    mso-border-alt: none;
    border: none !important;
    outline: none !important;
  }
    </style>
    <![endif]-->
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body,
    table,
    td,
    a {
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
    }

    table,
    td {
      border-collapse: collapse;
    }

    img {
      border: 0;
      outline: none;
      display: block;
    }

    @media screen and (max-width: 600px) {
      .email-container {
        width: 100% !important;
      }
    }
  </style>
</head>

<body style="font-family: Arial, sans-serif; color: #333333; background-color: #f4f4f4; padding: 20px;">
  <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" style="max-width: 400px;">
    <tr>
      <td align="center" style="padding: 10px 0; background-color: #ffffff;">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td width="25" style="background-color: #005599;">&nbsp;</td>
            <td align="left" style="font-size: 13px; font-weight: bold; color: #005599; padding: 0 10px;">
              Omar Al Jabir
            </td>
            <td style="font-size: 12px; color: #ffffff; background-color: #005599; padding: 5px 15px; min-width: 150px; text-align: center;">
              Business Development Manager
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center" style="padding: 0;" border="0">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td style="border-right: 1px solid #1186c8; background-color: #1186c8;">
              <img src="https://i.imgur.com/bvDQt2e.png" alt="gplex" width="100%" border="0" style="display: block; width: 100%; max-width: 400px; border: 0; outline: none; text-decoration: none;" />
            </td>
            <td style="background-color: #1186c8; color: #ffffff; font-size: 10px; line-height: 1.2em; padding: 10px 5px;">
              <p style="margin-bottom: 5px; font-size: 14px;">Genuity Systems Ltd.</p>
              <p style="margin: 0px;">Genusys Point</p>
              <p style="margin: 0px;">Plot-8, Road-4, Block-A, Section 11</p>
              <p style="margin: 0px;">Mirpur, Dhaka -1216 Bangladesh</p>
              <table role="presentation" border="0" cellpadding="1px" cellspacing="0" width="100%">
                <tr>
                  <td>Telephone</td>
                  <td>:</td>
                  <td>+(880) 9611 888 444</td>
                </tr>
                <tr>
                  <td>Mobile</td>
                  <td>:</td>
                  <td>+8801713364648</td>
                </tr>
                <tr>
                  <td>Web</td>
                  <td>:</td>
                  <td><a href="http://www.genuitysystems.com" style="color: #ffffff; text-decoration: none;">www.genuitysystems.com</a></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td align="center" style="background-color: #1186c8; padding: 10px;">
        <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
          <tr>
            <td align="center" style="padding: 0 5px;">
              <a href="https://facebook.com" target="_blank">
                <img src="https://imgur.com/LVVC5Lb.png" alt="Facebook" width="24" style="display: inline-block; margin-right: 10px;" />
              </a>
              <a href="https://youtube.com" target="_blank">
                <img src="https://imgur.com/zunod2B.png" alt="YouTube" width="24" style="display: inline-block; margin-right: 10px;" />
              </a>
              <a href="https://instagram.com" target="_blank">
                <img src="https://imgur.com/6Z3TdL5.png" alt="Instagram" width="24" style="display: inline-block; margin-right: 10px;" />
              </a>
              <a href="https://whatsapp.com" target="_blank">
                <img src="https://imgur.com/zunod2B.png" alt="WhatsApp" width="24" style="display: inline-block;" />
              </a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.