CSS阻止在Gmail App Mobile上不起作用

如何解决CSS阻止在Gmail App Mobile上不起作用

当我使用Gmail应用程序(移动版)查看电子邮件时遇到此问题:

  • 表格列堆叠在除Gmail应用之外的所有电子邮件客户端上的移动设备上

我注意到样式在google上不起作用,但是如果我使用内联的CSS(例如style =“ background-color:red”)将其工作。

我看到很多文章说不适用于gmail,但是另一种说法是,只要将其放在标记内,就可以起作用。

主要布局:

@using Sitecore.Mvc.Analytics.Extensions

<!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" />
    <!--[if !mso]><!-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--<![endif]-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>
        <!-- Used for storing title of the email -->
        @Html.Sitecore().Field("Subject")
    </title>

    <!-- The VisitorIdentification control ensures that people viewing this page with a traditional web browser will be classified as humans not bots. This control is not required if people only view messages using Email clients -->
    @Html.Sitecore().VisitorIdentification()

    @if (Sitecore.Context.PageMode.IsExperienceEditorEditing)
    {
        <link href="~/Assets/5-Components.min.css" rel="stylesheet" />
    }
        <style type="text/css">
            body {
                margin: 0px !important;
                padding: 0px !important;
            }

            .wrapper > tbody > tr > td {
                box-sizing: border-box;
            }

            @@media only screen and (max-width:720px) {
                .wrapper {
                    width: 90% !important;
                    margin: auto;
                }

                .templateColumnContainer {
                    display: block !important;
                    /* padding: 0 !important; */
                    width: 100% !important;
                }

                .marginBtm {
                    margin-bottom: 0px;
                }

                .footerLeft {
                    border-right: 5px #c2c2c2 solid;
                    border-bottom: 0px #c2c2c2 solid !important;
                }

                .footerRight {
                    border-left: 5px #c2c2c2 solid;
                    border-top: 0px #c2c2c2 solid !important;
                }
            }
        </style>
</head>

<body style="min-height: 97vh; background-color:#c2c2c2; font-family: Arial,Helvetica,sans-serif; box-sizing: border-box" class="@((Sitecore.Context.PageMode.IsExperienceEditorEditing) ? "edit-mode" : string.Empty)">
    <div style="min-height: 97vh; margin:0; padding-top: 16px; background-color:#c2c2c2; font-family: Arial,sans-serif; box-sizing: border-box">
    

        <center>
            @Html.Sitecore().Placeholder("mail-body")
        </center>
    </div>
</body>
</html>

组件占位符:


@model XX.Project.EXM.Models.ColumnComponent

<table width="600" cellpadding="0" cellspacing="0" class="wrapper">
    <tbody>
        <tr>
            <td width="50%" class="templateColumnContainer marginBtm" style="background-color: @Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: @Model.getFormattedPaddingDistance(); color:@Model.TextColor;">
                @Html.Sitecore().DynamicPlaceholder("mail-left-double-column")
            </td>
            <td width="50%" class="templateColumnContainer" style="background-color: @Model.BackgroundColor; border: 5px #c2c2c2 solid; Padding: @Model.getFormattedPaddingDistance(); color:@Model.TextColor;">
                @Html.Sitecore().DynamicPlaceholder("mail-right-double-column")
            </td>
        </tr>
    </tbody>
</table>

解决方法

当GMail在CSS中遇到错误时,它将从头部移除整个<style>块。

您的媒体查询前面有2个@符号。

@@media only screen and (max-width:720px) {

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?