html - Gmail 阻止内联 css 属性

标签 html css email gmail

我正在创建一个电子邮件模板,我主要使用内联 css,但在某些地方,当我在 gmail 中收到这封电子邮件时,甚至我的内联 css 也不起作用。它适用于雅虎,但不适用于 Gmail。
这是一个例子

<div class="etitle" style="float:left; padding-top:5px; width:58%; margin-left:20px;">

这些 css 属性在浏览器和 mailchimp 中都有效,但是当我发送电子邮件时,这些 css 属性在 gmail 中不起作用。 为什么 Gmail 会屏蔽这些 css 属性?
我几乎不需要这方面的指导

最佳答案

您可以使用内联 block 和标准 CSS 为发送到 Gmail 的电子邮件设置样式。支持大多数 CSS 选择器、属性和媒体查询。 Gmail 可能会忽略不受支持的 CSS 属性和选择器。

有关 supported CSS properties and queries 的完整列表,请参阅引用指南.

示例

<html>
  <head>
    <style>
      .colored {
        color: blue;
      }
      #body {
        font-size: 14px;
      }
      @media screen and (min-width: 500px) {
        .colored {
          color:red;
        }
      }
    </style>
  </head>
  <body>
    <div id='body'>
      <p>Hi Pierce,</p>
      <p class='colored'>
        This text is blue if the window width is
        below 500px and red otherwise.
      </p>
      <p>Jerry</p>
    </div>
  </body>
</html>

另请参阅:complete breakdown of the CSS support适用于全局最流行的移动、网络和桌面电子邮件客户端(来自 Campaign Monitor)。

关于html - Gmail 阻止内联 css 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47247372/

相关文章:

html - 除以 3 个 div 的响应式顶部横幅图片

javascript - 如何用输入和相同的值替换一个 tr 行中的每个 all div 元素

events - 哪些 DOM 事件可以绑定(bind)到 DIV 元素?

php - 为置顶帖子分配 .sticky 以外的类别

email - 通过SendGrid接收电子邮件

macos - 从 Mail.app 在撰写窗口中获取消息

asp.net-mvc - 为什么使用 sendgrid 发送的电子邮件总是在末尾附加 HASH?

css - 添加边距以显示 : table-cell child element

html - 是否可以让 div 中的所有元素对齐,即使它们大于 div?

android - 如何在 Android 浏览器上读取使用外部脚本动态加载的元素的 CSS 属性?