Question

我目前正在创建一个自适应电子邮件模板，我已进入测试阶段，并发现Google会删除您添加到表格中的所有课程。

我也尝试过使用ID，但是它们除了我尝试过的任何数据属性之外。

我读到了这一点，并且遇到了一个小技巧来绕过这个。我设法让这个工作，但似乎没有再次打破。这个技巧如下

[INFO] +- org.springframework.boot:spring-boot-starter-actuator:jar:1.2.3.RELEASE:compile
[INFO] |  \- org.springframework.boot:spring-boot-actuator:jar:1.2.3.RELEASE:compile
[INFO] \- org.springframework.boot:spring-boot-starter-remote-shell:jar:1.2.3.RELEASE:compile
[INFO]    +- org.crashub:crash.cli:jar:1.3.1:compile
[INFO]    +- org.crashub:crash.connectors.ssh:jar:1.3.1:compile
[INFO]    |  +- org.apache.sshd:sshd-core:jar:0.6.0:compile
[INFO]    |  +- org.apache.sshd:sshd-pam:jar:0.11.0:compile
[INFO]    |  |  \- net.sf.jpam:jpam:jar:1.1:compile
[INFO]    |  +- org.bouncycastle:bcpkix-jdk15on:jar:1.51:compile
[INFO]    |  \- org.apache.mina:mina-core:jar:2.0.2:compile
[INFO]    +- org.crashub:crash.embed.spring:jar:1.3.1:compile
[INFO]    +- org.crashub:crash.plugins.cron:jar:1.3.1:compile
[INFO]    |  \- it.sauronsoftware.cron4j:cron4j:jar:2.2.5:compile
[INFO]    +- org.crashub:crash.plugins.mail:jar:1.3.1:compile
[INFO]    |  \- javax.mail:mail:jar:1.4.7:compile
[INFO]    |     \- javax.activation:activation:jar:1.1:compile
[INFO]    +- org.crashub:crash.shell:jar:1.3.1:compile
[INFO]    \- org.codehaus.groovy:groovy:jar:2.3.11:compile

，CSS将是

<table id="container" lang="x-container" title="container" class="container" width="100%" cellpadding="0" cellspacing="0" style="max-width: 600px;margin: 0 auto;">

但谷歌似乎剥离了我的造型。一旦我在选择器前添加*它就会保留在我的css中，但我的元素似乎没有把它拿起来。

所以我的问题是。如果您不能使用ID或类，那么使用媒体查询在gmail中定位元素的最佳方法是什么？

Answer 1

您可以使用以下内容：

* [summary~='fakeclassname'] {
    styles: here;
}

＆＃34;总结＆＃34;是Gmail执行非删除的属性之一。在我发现Gmail实际上对电子邮件做了什么之后我发现这篇文章详细分解了它：

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

该页面上有一些有用的链接可以深入了解特定于Gmail的定位。

编辑：看来，精确定位会删除＆＃34;摘要＆＃34; ET发送预览中的属性。＆＃34;标题＆＃34;如果您希望它在Gmail和ET预览中看起来都正确，则属性可以正常工作。

Answer 2

这种方法目前似乎对我有用：

电子邮件模板<head>中的样式（这些样式已在Gmail中删除，但确实适用于其他客户）：

<style type="text/css">

    /* Styles below are applied on all clients except Gmail */


    /* Desktop */

    div[id=tablet],
    div[id=mobile]{
        display: none;
    }


    /* Tablet */

    @media only screen and (max-device-width: 1024px){
        div[id=desktop],
        div[id=mobile]{
            display: none !important;
        }

        div[id=tablet]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }


    /* Phone */

    @media only screen and (max-device-width: 736px){
        div[id=desktop],
        div[id=tablet]{
            display: none !important;
        }

        div[id=mobile]{
            display: block !important;
            font-size: 15px !important;
            max-height: none !important;
            overflow: visible !important;
        }
    }

</style>

<强> HTML：

<body>

    <div id="desktop">
        [template for desktop]
    </div>

    <div id="tablet" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for tablet]
    </div>

    <div id="phone" style="font-size: 0; max-height: 0; overflow: hidden;">
        [template for phone]
    </div>

</body>

Gmail剥离class / id / data-attribute - 替代方式无法正常工作

2 个答案: