VS Code 和我的浏览器正确显示此电子邮件签名，但我测试过的应用程序都没有正确显示它

VS Code and my browser displays this email signature properly, but none of the applications I've tested shows it correctly

提问人：Riaan Greeff 提问时间：9/21/2023 最后编辑：jonrsharpeRiaan Greeff 更新时间：9/21/2023 访问量：41

问：

基本上是标题。我使用eM客户端，我的客户端使用Outlook，我也在iCloud Web中对其进行了测试。没有一个正确显示签名，但 VS Code 和我的所有浏览器都可以。此时不确定原因和该怎么做。请注意，我是一名设计师，所以我在 Figma 中使用了自动布局，并使用该代码来获取此文件。该文件如下所示（请记住，我对此非常陌生，因此可能会很混乱）：

<html>
  
  <head>
    
    <title>Compucable email-signature</title>
    <style>  
@import url("https://fonts.googleapis.com/css?family=Rubik:300,700,italic"); 
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

html,
body {
  margin: 0px;
  height: 100%;
}
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}
a {
  text-decoration: none;
}

.email-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  position: relative;
  background-color: #ffffff;
  width: 100%;
  min-width: 758px;
  min-height: 162px;
}


.email-signature .info {
  display: inline-flex;
  flex-direction: column;
  height: 131px;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  flex: 0 0 auto;
}

.email-signature .name-and-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.email-signature .div {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
}

.email-signature .j-d-van-der-walt {
  position: relative;
  width: fit-content;
  margin-top: -1.13px;
  background: linear-gradient(180deg, rgb(43, 145, 209) 0%, rgb(41, 196, 169) 100%);
  -webkit-background-clip: text !important;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: Rubik, Helvetica;
  font-weight: 700;
  color: transparent;
  font-size: 24px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.email-signature .operations-director {
  position: relative;
  width: fit-content;
  font-family: "Rubik", Helvetica;
  font-weight: 300;
  font-style: italic;
  color: var(--blue);
  font-size: 13px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}


.email-signature .links {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  flex: 0 0 auto;
}

.email-signature .div-2 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
}


.email-signature .flexcontainer {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.email-signature .text {
  position: relative;
  align-self: stretch;
  margin-bottom: 0px;
  font-family: "Rubik", Helvetica;
  font-weight: 300;
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 0;
  line-height: normal;
}

.email-signature .text-wrapper {
  font-family: "Rubik", Helvetica;
  font-weight: 300;
  color: #003366;
  font-size: 8px;
  letter-spacing: 0;
}

.email-signature .div-3 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  position: relative;
  flex: 0 0 auto;
}

.email-signature .text-wrapper-2 {
  position: relative;
  width: fit-content;
  font-family: "Rubik", Helvetica;
  font-weight: 300;
  color: var(--blue);
  font-size: 8px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

:root {
  --white: rgba(255, 255, 255, 1);
  --blue: rgba(0, 51, 102, 1);
  --teal: rgba(0, 128, 128, 1);
  --orange: rgba(184, 115, 51, 1);
  --grey: rgba(211, 211, 211, 1);
}


    </style>
  </head>
  <body>
    <div class="email-signature">
      <img alt="Icon with compucable logo" style="position: relative;
  width: 132px;
  height: 132px;" 
  src="data:image/png;base64,imagecodehere>
      <div class="info">
        <div class="name-and-logo">
          <div class="div">
            <div class="j-d-van-der-walt">J.D. Van Der Walt</div>
            <div class="operations-director">Operations Director</div>
          </div>
          <img alt="compucable logo" style="position: relative;
  width: 245px;
  height: 16px;"
src="data:image/png;base64,imagecodehere>
        </div>
        <div class="links">
          <div class="div">
            <div class="div-2">
              <img alt="address icon" style="position: relative;
  width: 10px;
  height: 10px;"
src="data:image/png;base64,imagecodehere>
              <div class="flexcontainer">
                <p class="text">
                  <span class="text-wrapper">PTA: </span>
                  <a href="tel:0123429160" rel="noopener noreferrer"
                    ><span class="text-wrapper">012 342 9160<br></span
                  ></a>
                </p>
                <p class="text">
                  <span class="text-wrapper">CPT: </span>
                  <a href="tel:0212073977" rel="noopener noreferrer"
                    ><span class="text-wrapper">021 207 3977</span></a
                  >
                </p>
              </div>
            </div>
            <div class="div-2">
              <img alt="address icon" style="position: relative;
  width: 10px;
  height: 10px;"
src="data:image/png;base64,imagecodehere>
              <a href="https://maps.app.goo.gl/JXRQiR4KMZ8LLnv9A" rel="noopener noreferrer"
                ><div class="flexcontainer">
                  <p class="text">
                    <span class="text-wrapper">1028 Pretorius Street,<br></span>
                  </p>
                  <p class="text">
                    <span class="text-wrapper">Hatfield, Pretoria, 0002</span>
                  </p>
                </div></a>
            </div>
          </div>
          <div class="div">
            <div class="div-3">
              <img alt="address icon" style="position: relative;
  width: 10px;
  height: 10px;"
src="data:image/png;base64,imagecodehere>
              <a href="mailto:[email protected]" rel="noopener noreferrer"
                ><div class="text-wrapper-2">[email protected]</div></a
              >
            </div>
            <div class="div-3">
              <img alt="address icon" style="position: relative;
  width: 10px;
  height: 10px;"
src="data:image/png;base64,imagecodehere>
              <a href="https://www.compucable.co.za" rel="noopener noreferrer"
                ><div class="text-wrapper-2">www.compucable.co.za</div></a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

我从 SVG 开始，但显然 Oulook 不支持它（？？），然后决定使用 base64 对图像进行编码。不知道下一步该怎么做。

损坏的签名

我看到了一些关于使用表格进行电子邮件签名的事情。老实说，如果我应该从头开始，不知道该怎么做？您可以将图像添加到表格中吗？

html css 图片 电子邮件 签名

评论

1赞 Peter B 9/21/2023
电子邮件程序通常在它们支持的 HTML 和 CSS 方面非常有限，例如 mailchimp.com/help/limitations-of-html-email。忘掉不断发展的浏览器环境，想想 HTML4 甚至更少。

答：

0赞 Hard 9/21/2023 #1

如果您正在创建电子邮件模板，请尝试使用表格创建，是的，您可以将图像添加到表格中。

.container {
  padding: 2rem 0rem;
}

h4 {
  margin: 2rem 0rem 1rem;
}

.table-image {
  td, th {
    vertical-align: middle;
  }
}
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12">
        <table class="table table-image">
          <thead>
            <tr>
              <th scope="col">Day</th>
              <th scope="col">Image</th>
              <th scope="col">Article Name</th>
              <th scope="col">Author</th>
              <th scope="col">Words</th>
              <th scope="col">Shares</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th scope="row">1</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-3.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap 4 CDN and Starter Template</td>
              <td>Cristina</td>
              <td>913</td>
              <td>2.846</td>
            </tr>
            <tr>
              <th scope="row">2</th>
              <td class="w-25">
                  <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/sheep-5.jpg" class="img-fluid img-thumbnail" alt="Sheep">
              </td>
              <td>Bootstrap Grid 4 Tutorial and Examples</td>
              <td>Cristina</td>
              <td>1.434</td>
              <td>3.417</td>
            </tr>
          </tbody>
        </table>   
    </div>
  </div>
</div>

请查看此博客：https://www.geeksforgeeks.org/email-template-using-html-and-css/

1赞 ATLANT 9/21/2023 #2

哦！是的，不幸的是，电子邮件布局停留在 2004 年。

因此，您应该使用表格布局来处理电子邮件。这真是太有趣了！（否)

不幸的是，没有svg。任何 svg - 都只是一个静态托管在服务器上的小 png 图片，并在电子邮件中插入指向它的链接。

还必须内联所有样式。你可以用 scss 编写代码，然后将其转换为 css，然后将 HTML 和 CSS 转换为一个内联布局。gulp

您还可以在样式标签中与电子邮件一起附加一些规则，但只有一半的电子邮件服务会读取它们，因此请以这样一种方式编写，即同时在移动设备和桌面上看起来都很漂亮。@media css

关于如何写漂亮的电子邮件有很多规则和建议，我将分享几个有用的链接：

而这个 gulp 工具，将帮助您制作正确的电子邮件：

package.json：

{
  ...
  "scripts": {
    "start": "gulp buildEmail"
  },
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-email-builder": "^3.0.0"
  }
}

gulpfile.js：

const gulp = require('gulp');
const emailBuilder = require('gulp-email-builder');

gulp.task('buildEmail', function () {
  return gulp
    .src(['./src/emails/*.html'])
    .pipe(emailBuilder().build())
    .pipe(gulp.dest('./dist/emails/'));
});

就这样，把你的html电子邮件放进去，从中拿走./src/emails/./dist/emails/

评论

0赞 Riaan Greeff 9/22/2023
非常感谢，用桌子再次建造了整个东西。只是差点开始哭泣！很确定我修复了它，现在对我和客户来说都很好。
0赞 ATLANT 9/22/2023
我无法忍受你的痛苦，兄弟❤️ 🩹 @RiaanGreeff

上一个：背景图像未显示在 Outlook.com 中

下一个：当电子邮件中有宽幅图像时，无论动态宽度如何，电子邮件字体都很小：100%;高度：自动设置