个人中心
gpt4 book ai didi

Css 样式在全 View 字母界面 Gmail 中不起作用

转载 作者：行者123 更新时间：2023-11-28 02:56:10 29 4
gpt4 key购买 nike

我在工作中创建邮件模板。我记得 Gmail 开始在“head”标签中支持 css 样式。 (规范:https://developers.google.com/gmail/design/css)

我试过了，很失望。我的信件很大，因为有很多数据，Gmail 将其截断并显示了查看完整信件的链接([Message clipped] View entire message)。我的 css 样式应用于标记。但是当我通过链接查看完整字母时，我看不到样式 - 它们未应用。

问题截图

enter image description here

我需要帮助。我认为这是错误。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="x-apple-disable-message-reformatting">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        /*
====================================================
== [START] == Reset styles
====================================================
*/
        #email_body {
            margin: 0;
            padding: 0;
            width: 100% !important;
            height: 100% !important;
            -ms-text-size-adjust: none;
            -webkit-text-size-adjust: none;
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            color: #333;
            line-height: 120%;
        }

        #email_body table, #email_body td, #email_body div, #email_body p, #email_body a {
            text-size-adjust: 100%;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }
        #email_body table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        #email_body table, #email_body td {
            margin: 0;
            padding: 0;
        }
        #email_body img {
            border: 0;
            line-height: 100%;
            outline: none;
            text-decoration: none;
            -ms-interpolation-mode: bicubic;
        }
        #email_body p {
            margin: 0;
        }
        #email_body strong, #email_body b {
            font-weight: 700;
            font-style: inherit;
        }
        #email_body i, #email_body em {
            font-style: italic;
            font-weight: inherit;
        }
        #email_body #outlook a {
            padding: 0;
        }
        #email_body .ReadMsgBody, #email_body .ExternalClass {
            width: 100%;
        }
        #email_body .ExternalClass, #email_body .ExternalClass p, #email_body .ExternalClass span, #email_body .ExternalClass font, #email_body .ExternalClass td, #email_body .ExternalClass div {
            line-height: 100%;
        }
        /*
        ====================================================
        == [START] == Hot Rules
        ====================================================
        */
        #email_body .pb-5{padding-top: 5px !important;}
        #email_body .pb-10{padding-top: 10px !important;}
        #email_body .pt-10{padding-top: 10px !important;}
        #email_body .fs-12{font-size:12px !important;}
        #email_body .fs-16{font-size:16px !important;}
        #email_body .fw-n{font-weight: 400 !important;}
        #email_body .fw-b{font-weight: 700 !important;}
        #email_body .wo-u{text-decoration: none !important;}
        #email_body .t-regular{color:#333 !important;}
        #email_body .t-additional{color: #999 !important;}
        #email_body .t-red{color: #cc373c !important;}

        /*Gmail anti-munged*/
        .content_wrap table.anti-munged {
            width: 100% !important;
        }
        /*
        ====================================================
        == [START] == Skeleton
        ====================================================
        */
        #email_body .content_wrap {
            background-color: #fff;
            color: #333;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-text-size-adjust: none;
            font-size: 14px;
            line-height: 120%;
        }
        #email_body .content_wrap table,
        #email_body .content_table {
            font-family: Arial, Helvetica, sans-serif;
        }
        /*
        ====================================================
        == [START] == Line Data Table
        ====================================================
        */
        #email_body .blueHeader {
            font-size: 16px;
            color:#37809f;
            font-weight: 700;
        }
        #email_body .lineDataTable {
            border-bottom: 1px solid #ccc;
        }
        #email_body .lineDataTable.ldt-7-11 td {
            padding: 7px 0 11px 10px;
        }
        #email_body .lineDataTable tr > td:first-child {
            padding-left: 0;
        }
        #email_body .lineDataTable td {
            border-top: 1px solid #ccc;
        }
    </style>
</head>
<body id="email_body">
<table class="content_wrap" align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;">
    <tr>
        <td align="center" valign="top" style="padding:20px 0;">
            <table class="content_table" align="center" valign="top" border="0" cellpadding="0" cellspacing="0"  width="100%" style="width: 100%;max-width:600px;" id="contentTable">
                <tr class="applyExtraSpaceBefore">
                    <td align="left" valign="top" class="blueHeader pb-5 pt-10">
                        Top Movers
                    </td>
                </tr>

                <tr class="extraSpaceAfter-30">
                    <td align="left" valign="top" class="pb-10 fs-16">
                        <table align="left" valign="top" border="0" cellpadding="0" cellspacing="0" width="100%" style="width:100%;" class="lineDataTable ldt-7-11 anti-munged">
                            <tr>
                                <td align="left" valign="top">
                                    <a href="#" target="_blank" class="wo-u t-regular">Stas (9123)</a>
                                </td>
                                <td align="left" valign="top" width="155" style="width:155px;">
                                    <a href="#" target="_blank" class="wo-u fw-b t-red">100<br><span class="fs-12 fw-b t-additional">09/02/2017</span>
                                    </a>
                                </td>
                                <td align="right" valign="top" width="70" style="width:70px;">
                                    <a href="#" target="_blank" class="wo-u t-regular fw-b">
                                       +900%<br><span class="fs-12 fw-n">Prior Value</span>
                                    </a>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

为了实现 Gmail 截取邮件的情况 - 您可以在模板中添加任何数据(例如这个大数据表)http://img.mtrc.in/mkBi

最佳答案

这不是错误，而是 Gmail 不久前引入的一项(某种)功能。发送到 Gmail 的任何电子邮件，如果其大小超过 102kb，就会发生裁剪。由于您的电子邮件正在剪辑，因此电子邮件大小必须在 102kb 以上。尝试以下任一方法:

  1. 精简您的 CSS。删除所有不需要的空格和换行符(只是不要破坏代码)
  2. 删除所有未使用的类
  3. 删除评论(如果您是唯一使用该模板的人)
  4. 尽可能减少表格的数量。如果可以使用 2 个表完成，则不要使用超过 2 个。

您可以阅读更多相关信息 here .如果您将代码发布在某人身上，他们会为您提供修复问题的指导。

希望这就是您要找的答案。

关于Css 样式在全 View 字母界面 Gmail 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46443719/

29 4 0
文章推荐： c++ - 判断 C++11 unordered_set 中是否发生碰撞
文章推荐： javascript - 在 jQuery 实时预览 div 中将文本转换为图像
文章推荐： ios - 苹果手机 :active pseudoclass not working in safari
文章推荐： html - 在angularJs中制作一个输入附加按钮作为文件附件按钮
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com