真的没有办法在 gmail 的 TD 中应用 css class 吗？
Is there really no way to apply a css class in a TD in gmail?
我必须向不同的收件人发送（复杂的）html-mail，并拼命尝试让它为各种电子邮件客户端（至少是 Outlook、iOS 和 gmail）工作。
我现在有一个适用于 Outlook 和 iOS 的版本，但不适用于 gmail (Android)。
简短描述：
header.
中定义了各种 css 样式和媒体查询
css class conttext（见下面的片段）定义字体系列、字体大小等。
css class conttextboldblue（见下面的片段）设置属性：颜色：#0000FF； （蓝色）font-weight：粗体；
class 上下文设置为 td 元素并适用于任何平台。
class contextboldblue 在 span 中设置 td 并适用于所有平台（包括我用于测试的 GC）gmail 除外。
如果我设置样式 inline（下面片段的最后一行），它在 gmail 中有效，但所有其他客户端 lose 在上下文中设置的样式（字体系列、字体大小等）。
正如我上面写的，这是一封巨大而复杂的电子邮件，我不想删除所有 css 样式并内联任何内容（此外，我还需要媒体查询）。
我已经搜索了互联网和 SO 并且只发现 - 如果定义了 td 的 css 样式，则 gmail 中删除所有其他 css 样式。 ..:-(
而且.. 情况似乎确实如此...
因此我的问题是：
- 有人有解决方案可以在 gmail 中使用吗？
感谢任何提示！
代码已截断:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
并非所有版本的 Gmail 都是平等的，并且并非所有版本都支持 <style> 元素。特别是，如果您在 Gmail（Android 或 iOS）中使用第三方电子邮件地址（例如 @outlook.com 地址）进行测试，您将不会获得对 <style> 并且只有内联样式可以在那里工作。 （我写了a blog post about Gmail CSS support here。）
Gmail 客户端还以对任何格式错误的 CSS 挑剔并在看到不喜欢的内容时删除整个 <style> 标签而闻名。例如，具有 @media { @font-face { … }} 之类的规则将使 Gmail（所有客户端）删除包含这些规则的整个 <style> 元素。 （但请随时 post 您的整个代码以获得关于此的详细反馈。）
出于这些原因，通常认为在 HTML 电子邮件中内嵌样式是最佳做法。
这是我的发现...
总的来说：
我们的 html 电子邮件包含图像（带链接）、特殊格式的文本（粗体、蓝色、红色）table、项目符号、内部链接，并且必须发送给大约 12k 的收件人，因此我们不知道他们将在哪些设备上阅读电子邮件。
几年前，我们只针对桌面（Outlook）优化了类似的电子邮件。这些时代肯定结束了 - 我们不得不期待，超过 50% 会在移动设备上阅读电子邮件（这是 事实）。
创建这样一封电子邮件非常复杂且耗时，至少在桌面 (Outlook) 和移动设备 (iOS (iOS 邮件应用程序) 和 Android (gmail) 上可以毫无问题地阅读).
注意（主要）问题（发送到我的特定 html 电子邮件）：
- Outlook 需要较小的字体大小和固定宽度 table 以及图像看起来 O.K。
- Outlook 还需要对项目符号进行特殊设置，与移动客户端不兼容。
- Outlook 和 iOS（以及任何浏览器，例如 Google Chrome）遵守 css-stiles（设置为“class=”）和媒体查询 - 我还没有找到一种方法将其与 gmail 一起使用。对我来说，似乎 gmail 在打开电子邮件后删除了所有 css-settings（也许有办法让它工作，但经过几天的尝试和错误后我放弃了）。唯一可行的（对我而言）是将样式 (style =) 直接应用于 html 元素。如果发现一些信息它也适用于 gmail，但有（大量）限制 https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
- 移动客户端需要一个视口条目并将图像和 tables 设置为 100%，否则电子邮件会自动缩放为无法阅读的“微型字体”（用户必须缩放到能够阅读文本）
- 内部链接在 Outlook 和 Android 上有效，但在 iOS 中无效（否则 iOS 对 css 有很好的支持，行为也应该如此)
我还没有找到真正的“解决方案”，但（仅）解决方法。
视口条目：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在 style 标签 中，它设置所有 css for outlook（图像宽度和 table，项目符号的字体大小和“特殊”设置（移动客户端错误）。
ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
然后我在媒体查询
中设置基本设置f或iOS手机
@media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
这会重置最大宽度为 1024px 的所有 iOS 客户端的 outlook 特殊设置。
然后我为各种 iOS 设备设置 css - 例如：
/*IPhone 6/7/8: 375px */
@media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
然后，我设置了 Android (gmail) 的属性，此外还直接设置了 html 元素。
示例：
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
在此示例中，我将字体颜色设置为红色和粗体以及边框。
注意：在classes style1（border and padding）和conttextboldblue.
中定义相同
所以...我设置属性 double（按时间与 Style= 内联，并在 css classes 中设置一次）。
Android (gmail) 仅尊重“style=”，因此 iOS 优先采用 css 样式 。
所以我可以在媒体查询中为 iOS 定义更多样式（例如字体大小）。
Android (gmail) 似乎自动应用“可用”字体大小。
如上所述，这不是解决方案，而是 my 案例的解决方法。
如果我将来要发送更多 html 邮件（事实并非如此），我会投入（很多）更多时间来寻找真正的解决方案...
进一步提示：
在此处验证您的 html 代码：
https://validator.w3.org/#validate_by_upload
注意：该工具将双重分配的样式（内联和带有 css）显示为错误，但它仍然有效
注意，注释行的注释正确：
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
（我的编辑将 css 中的行评论为 html 评论，我花了一些时间才注意到...）
在 Google Chrome 中加载您的 html 电子邮件，按 F12（调试模式）并在那里检查（特别是，如果您在你的 html).
中有媒体查询
如果您有媒体查询但 GC 不显示它，则说明您的代码有问题。
使用 GC，您可以轻松地模拟手机并查看是否正确应用了媒体查询。
我希望这对某人有所帮助...
我必须向不同的收件人发送（复杂的）html-mail，并拼命尝试让它为各种电子邮件客户端（至少是 Outlook、iOS 和 gmail）工作。
我现在有一个适用于 Outlook 和 iOS 的版本，但不适用于 gmail (Android)。
简短描述：
header.
中定义了各种 css 样式和媒体查询
css class conttext（见下面的片段）定义字体系列、字体大小等。
css class conttextboldblue（见下面的片段）设置属性：颜色：#0000FF； （蓝色）font-weight：粗体；
class 上下文设置为 td 元素并适用于任何平台。
class contextboldblue 在 span 中设置 td 并适用于所有平台（包括我用于测试的 GC）gmail 除外。
如果我设置样式 inline（下面片段的最后一行），它在 gmail 中有效，但所有其他客户端 lose 在上下文中设置的样式（字体系列、字体大小等）。
正如我上面写的，这是一封巨大而复杂的电子邮件，我不想删除所有 css 样式并内联任何内容（此外，我还需要媒体查询）。
我已经搜索了互联网和 SO 并且只发现 - 如果定义了 td 的 css 样式，则 gmail 中删除所有其他 css 样式。 ..:-(
而且.. 情况似乎确实如此...
因此我的问题是：
- 有人有解决方案可以在 gmail 中使用吗？
感谢任何提示！
代码已截断:
<td><span class="conttext"><br>
Some text <strong>some strong text</strong> mit <strong>some strong text</strong> some text<br>
<br>
Some text <br>
</span>
<span class="conttextboldblue">This text is NOT (only in gMail) not formatted -> conttextboldblue is just ignored</span><br>
<span style="color:blue; font-weight:bold;">This text is formatted but all other clients (iOS und Outlook) lose the formats defined in conttext!</span><br>
并非所有版本的 Gmail 都是平等的，并且并非所有版本都支持 <style> 元素。特别是，如果您在 Gmail（Android 或 iOS）中使用第三方电子邮件地址（例如 @outlook.com 地址）进行测试，您将不会获得对 <style> 并且只有内联样式可以在那里工作。 （我写了a blog post about Gmail CSS support here。）
Gmail 客户端还以对任何格式错误的 CSS 挑剔并在看到不喜欢的内容时删除整个 <style> 标签而闻名。例如，具有 @media { @font-face { … }} 之类的规则将使 Gmail（所有客户端）删除包含这些规则的整个 <style> 元素。 （但请随时 post 您的整个代码以获得关于此的详细反馈。）
出于这些原因，通常认为在 HTML 电子邮件中内嵌样式是最佳做法。
这是我的发现...
总的来说：
我们的 html 电子邮件包含图像（带链接）、特殊格式的文本（粗体、蓝色、红色）table、项目符号、内部链接，并且必须发送给大约 12k 的收件人，因此我们不知道他们将在哪些设备上阅读电子邮件。
几年前，我们只针对桌面（Outlook）优化了类似的电子邮件。这些时代肯定结束了 - 我们不得不期待，超过 50% 会在移动设备上阅读电子邮件（这是 事实）。
创建这样一封电子邮件非常复杂且耗时，至少在桌面 (Outlook) 和移动设备 (iOS (iOS 邮件应用程序) 和 Android (gmail) 上可以毫无问题地阅读).
注意（主要）问题（发送到我的特定 html 电子邮件）：
- Outlook 需要较小的字体大小和固定宽度 table 以及图像看起来 O.K。
- Outlook 还需要对项目符号进行特殊设置，与移动客户端不兼容。
- Outlook 和 iOS（以及任何浏览器，例如 Google Chrome）遵守 css-stiles（设置为“class=”）和媒体查询 - 我还没有找到一种方法将其与 gmail 一起使用。对我来说，似乎 gmail 在打开电子邮件后删除了所有 css-settings（也许有办法让它工作，但经过几天的尝试和错误后我放弃了）。唯一可行的（对我而言）是将样式 (style =) 直接应用于 html 元素。如果发现一些信息它也适用于 gmail，但有（大量）限制 https://litmus.com/community/discussions/8098-media-queries-support-for-android-gmail-app-2019-verison
- 移动客户端需要一个视口条目并将图像和 tables 设置为 100%，否则电子邮件会自动缩放为无法阅读的“微型字体”（用户必须缩放到能够阅读文本）
- 内部链接在 Outlook 和 Android 上有效，但在 iOS 中无效（否则 iOS 对 css 有很好的支持，行为也应该如此)
我还没有找到真正的“解决方案”，但（仅）解决方法。
视口条目：
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在 style 标签 中，它设置所有 css for outlook（图像宽度和 table，项目符号的字体大小和“特殊”设置（移动客户端错误）。
ul, ol{margin-left: 20px !important;}
li {text-align:-webkit-match-parent; display:list-item;text-indent: -1em; margin-top: 5px;}
然后我在媒体查询
中设置基本设置f或iOS手机@media screen and (max-width: 1024px) {
/* Reset Spezialeinstellungen Outlook für alle Mobiles*/
ul,ol {margin-left: 0px; }
li {text-align:left; display:list-item;text-indent: 0px; margin-top: 0px;}
.HauptTabelle {
width: 100% !important;
}
这会重置最大宽度为 1024px 的所有 iOS 客户端的 outlook 特殊设置。
然后我为各种 iOS 设备设置 css - 例如：
/*IPhone 6/7/8: 375px */
@media screen and (max-width: 375px) {
.conttext {
font-size: 20px !important;
line-height: 22px !important;
}
.Headline0Boldleft {
font-size: 20px !important;
line-height: 22px !important;
}
.headline {
font-size: 20px !important;
line-height: 22px !important;
}
.headtext {
font-size: 20px !important;
line-height: 22px !important;
}
.conttextboldblue {
font-size: 20px !important;
line-height: 22px!important;
}
.conntextbold {
font-size: 20px !important;
line-height: 22px !important;
}
}
然后，我设置了 Android (gmail) 的属性，此外还直接设置了 html 元素。
示例：
<td style="color: #0000FF; font-weight: bold; border: 2px solid #FF0000; padding:4px !important;" class="style1"><span class="conttextboldblue">Some text... and further code...
在此示例中，我将字体颜色设置为红色和粗体以及边框。
注意：在classes style1（border and padding）和conttextboldblue.
中定义相同
所以...我设置属性 double（按时间与 Style= 内联，并在 css classes 中设置一次）。
Android (gmail) 仅尊重“style=”，因此 iOS 优先采用 css 样式 。
所以我可以在媒体查询中为 iOS 定义更多样式（例如字体大小）。
Android (gmail) 似乎自动应用“可用”字体大小。
如上所述，这不是解决方案，而是 my 案例的解决方法。
如果我将来要发送更多 html 邮件（事实并非如此），我会投入（很多）更多时间来寻找真正的解决方案...
进一步提示：
在此处验证您的 html 代码：
https://validator.w3.org/#validate_by_upload
注意：该工具将双重分配的样式（内联和带有 css）显示为错误，但它仍然有效
注意，注释行的注释正确：
CSS:
/* Your comment */
HTML:
<!-- Your comment -->
（我的编辑将 css 中的行评论为 html 评论，我花了一些时间才注意到...）
在 Google Chrome 中加载您的 html 电子邮件，按 F12（调试模式）并在那里检查（特别是，如果您在你的 html).
中有媒体查询
如果您有媒体查询但 GC 不显示它，则说明您的代码有问题。
使用 GC，您可以轻松地模拟手机并查看是否正确应用了媒体查询。
我希望这对某人有所帮助...