时间戳

首页 > 解决方案 > HTML签名在多个设备上不同

html - HTML签名在多个设备上不同

问题描述

我曾尝试给弗兰肯斯坦一个电子邮件签名，但我失败了。

我在 iPhone、Mac Mail、Thunderbird 和 Gmail 上打开了电子邮件，它们看起来都不同。有些将社交图标放在主徽标下方，有些则将灰色文本删除。

小提琴（看起来正确）：https ://i.imgur.com/OmjAliW.png

迅雷邮箱：https ://i.imgur.com/gk0eL3y.jpg

邮箱：https ://i.imgur.com/DVZYdxF.png

Mac 邮件：https ://i.imgur.com/jPS89ou.png

iPhone：https ://i.imgur.com/ZZob4Ie.png

这是当前代码：

<!DOCTYPE html>
<html>

  <head>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,900&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: 'Montserrat', sans-serif;
        font-size: 12px;
        font-weight: 300;
        color: black;
      }

      td {
        display: table-cell;
      }

      table {
        table-layout: fixed;
        height: 81px;
        width: 250px;
        overflow-y: hidden;
        display: block;
      }

    </style>
  </head>

  <body>

    <table>
      <tr>
        <td rowspan="2" style="width:45px;vertical-align:top"><a href="https://www.corbuk.com" target="_blank"><img style="border:none" width="45" src="https://i.imgur.com/qFFfOdW.png"></a>
        </td>
        <td style="height:45px;vertical-align:top;padding-top:7px;padding-left:15px"><b><span style="color:#000000;font-size:12px;">NAME HERE</span></b><br><span style="color:grey;font-size:10px;font-weight:400;">General Manager</span></td>

      </tr>
      <tr>
        <td style="padding-left:15px;vertical-align:bottom">
          <a href="#" style="padding-right:5px"><img width="22" src="https://i.imgur.com/L7RBFZu.png" alt="Facebook" style="border:none"></a>
          <a href="#" style="padding-right:5px"><img width="22" src="https://i.imgur.com/Pj2TSoO.png" alt="Instagram" style="border:none"></a>
          <a href="#"><img width="22" src="https://i.imgur.com/qtmS8US.png" alt="Website" style="border:none"></a>
        </td>

      </tr>
    </table>

  </body>

</html>

标签： htmlcssthunderbird

解决方案

一些现代邮件客户端允许非内联 CSS。但是，大多数电子邮件客户端仍然要求您内联编写 CSS，因此表格样式不能位于页面顶部，而必须像嵌入一样<table style="..."></table>

有关描述哪些客户端允许哪些标签的列表，请参阅https://www.campaignmonitor.com/css/ 。

另外，我不知道这是否会有所不同，但请使用“20px”而不是“20”。

推荐阅读