0

我遇到了 Gmail 中的 HTML 电子邮件剥离样式标签的问题。以下是我在文档头部的样式标记示例，它在 iOS 应用程序的 Gmail 中有效。Gmail 中的文本在桌面上显示为红色，在移动设备上显示为绿色。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      @media screen and (max-width: 600px) {
        .some-class {
          color: green !important;
        }
      }
    </style>
  </head>
  <body>
    <div class="some-class" style="color: red;">Test</div>
  </body>
</html>

但是，如果我在样式块中的任何地方使用子后代选择器，它就会中断>，即使我将它放在单独的样式块中，Gmail 似乎也会删除所有样式块。这是一个示例，我使用子后代选择器，Gmail 删除了所有样式块。文本在桌面和移动设备上都是红色的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      @media screen and (max-width: 600px) {
        .some-class {
          color: green !important;
        }
      }
    </style>
    <style type="text/css">
      @media screen and (max-width: 600px) {
        .breaking-class > a {
          color: blue !important;
        }
      }
    </style>
  </head>
  <body>
    <div class="some-class" style="color: red;">Test</div>
  </body>
</html>

有没有人对我可以在这里做什么有任何建议。对我来说，一些可能的成功结果是：

  1. 一种允许在 Gmail 中使用子后代选择器的方法（最佳情况）。
  2. 一种不支持 Gmail 中的后代选择器的方法，但它实际上不会破坏和删除其他 css，如.some-class类。（使用单独的样式块对我不起作用）

现在唯一有效的是删除后代选择器，但它对我需要的东西的特异性要低得多。

4

0 回答 0