相关疑难解决方法(0)

我正在为电子邮件简报设计HTML模板.我了解到许多电子邮件客户端忽略了链接的样式表,而其他许多(包括Gmail)完全忽略了CSS块声明.内联样式属性是我唯一的选择吗？样式化HTML电子邮件的最佳做法是什么？

我已经开发了十多年的网站了,但很快就发现,在为电子邮件客户开发时,我开发网络的许多习惯都没用.这让我感到非常沮丧,所以我想我会提出一个问题,希望能够为像我这样的人发现最佳实践和必要的考虑因素,这些人可能会不时地设计gmail,outlook等.

示例: <style>...</style> vs内联CSS.

简而言之:什么从网络世界转移到电子邮件世界,什么没有.

我正在使用 NopCommerce 制作 HTML 电子邮件模板。从那以后我把所有的 CSS 都放在内联中，但不起作用，在大多数情况下，除了网格样式之外，所有内容都有效。具体来说grid-gap，grid-template-columns它们在发送到 Gmail 后似乎就消失了。下面的代码片段是发送之前的原始代码。

<div class="grid-container" style="display: grid; grid-gap: 10px; background-color: white;margin-top:10px;left-padding: 10px; text-align:center; grid-template-columns: 33% 33% 33%;">
    <div style="background-color: #ebebe0;">
        <h1>Title 3</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 4</h1>
        <p>Lorem Ipsum</p>
    </div>
    <div style="background-color: #ebebe0;">
        <h1>Title 5</h1>
        <p>Lorem Ipsum</p>
    </div>
</div>

上面的图片取自 Gmail，正如您所看到的，grid-gap似乎grid-template-columns丢失了。任何人都可以给我指点或解决这个问题吗？非常感激。

在我的狂欢商店中，我正在准备邮件程序在订单确认时发送电子邮件，但 CSS 属性：justify-content未出现在呈现的电子邮件中。

以下是我的 HTML：

  <div class="banner">
    <img class="height-50perc banner-content" src="https://myUrl" />
    <span class="banner-content">Order confirmed</span>
  </div>

我的CSS：

.banner {
  display: flex;
  height: 80px;
  background: linear-gradient(90deg, #2e3092 , #0c5fdc);
  justify-content: space-between;
}

.banner-content {
  margin-top: auto;
  margin-bottom: auto;
  margin-left: 10px;
  margin-right: 10px;
  color: white;
  font-size: 20px;
}

但在呈现的电子邮件中，我没有看到 property: justify-content。当我检查相应的元素时：它是这样的：

<div class="m_2586726072602943149banner" style="background:linear-gradient(90deg,#2e3092,#0c5fdc);display:flex;height:80px">
    ....
</div>

justify-content注意这里没有div。我正在 Mac 的 Chrome 和 Firefox 浏览器中查看电子邮件。

我还尝试将 CSS 更改为：

.banner {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; …