Question

我遇到了一些关于Gmail的CSS问题。我的HTML电子邮件具有响应能力，可以在iPhone上运行，但在发送到Gmail时，它会显示“mobile_toolbar”和“full_toolbar”。我需要摆脱移动工具栏，以便为Gmail桌面正确格式化电子邮件。

我已经尝试过使用display：none！important但它无效。

谢谢！

CSS：

<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff;}
body     {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased;font-family:Arial}
table {border-collapse: collapse;}
p {font-family: Arial, serif;}
a {font-family: Arial, serif;}

@media only screen and (max-width: 640px)  {
                body[yahoo] .deviceWidth {width:440px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
                                    #full_toolbar {display:none !important;}



                #mobile_toolbar {display:block; background:white;}

                #mobile_toolbar a {text-decoration:none;}
        }

@media only screen and (max-width: 479px) {
                body[yahoo] .deviceWidth {width:280px!important; padding:0;}    
                body[yahoo] .center {text-align: center!important;}  
        }

            @media screen and (min-width: 641px) and (max-width: 1920px) {
                *[id=mobile_toolbar] {

display:none!important;
overflow:hidden!important;

 }

        }

HTML：

                    <div id="full_toolbar"><img usemap="#toolbar" class="deviceWidth" src="images/main_toolbar.jpg" alt="" style="display: block; border-radius: 4px;" border="0">

                <div id="mobile_toolbar" >

                <a href="#"><div style="margin-bottom: 5px; width:100%; height:100%; color:black; background:#a4a4a4; font-weight: bold;">New Inventory</div>
                <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Used Inventory</div>
                    <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Services</div>
                        <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Directions</div>
                            <a href="#"><div style="margin-bottom: 5px; width:100%; color:black; background:#a4a4a4; font-weight: bold;">Contact</div>
<a href="#"><img src="images/twitter.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/facebook.jpg">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a><a href="#"><img src="images/youtube.jpg"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#"><img src="images/google.jpg"></a>

                </div>

Answer 1

Gmail仅接受内联样式。没有头标签，没有样式标签，只有内联。这意味着没有媒体查询。

这应该可以为您提供所需的答案。：）

这也是一个很好的帮助：http://www.campaignmonitor.com/css/

Answer 2

为了在提供的答案的基础上，除了内联CSS之外，您还会在Gmail移动应用中使用display遇到问题。

添加!important声明也有帮助，但它可能会让您在Outlook中遇到麻烦而忽略该规则。

您可能需要尝试其他方法以获得更好的兼容性以及内联CSS。下面的示例默认隐藏您的工具栏，对于支持媒体查询的电子邮件客户端，您可以通过撤消它们来重新打开它。

<div id="full_toolbar style="width:0 !important; overflow:hidden !important; display:none !important;">

此question最初涵盖了相同的想法。

Answer 3

您可以轻松地将所有CSS内联到campaignmonitors inline css tool 但正如jsuissa所说，display：none对gmail不起作用，它会显示出来。

Answer 4

Gmail不会尊重显示：无。你可以通过在元素上声明display：none！important inline来解决这个问题，但这也是毫无价值的，因为你永远无法覆盖它。

为了隐藏HTML电子邮件中的元素并让其在Gmail中运行，您需要将其归零并调整CSS中的大小（Gmail将忽略该位置）。

这适用于单个表或嵌套表。您必须在没有任何内联声明尺寸或浮动以外的位置的情况下编写所有代码：左..如果您需要在某些内容上设置尺寸，请在顶部的样式表中执行此操作，Gmail将不会注意这些内容。这包括图像尺寸，填充，边距，字体大小，线高，边框，浮点，文本对齐等。引用尺寸或位置的任何内容。

像这样：

<style>
@media only screen and (max-width: 480px) { 
*[class~=show_on_mobile] {
    display : block !important;
    width : auto !important;
    max-height: inherit !important;
    overflow : visible !important;
    float : none !important;
}
</style>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<!--[if !mso]><!-->
    <td style="width: 0; max-height: 0; overflow: hidden; float: left;">
    </td>
</tr>
<!--<![endif]-->
</table>

此外，添加的条件注释涵盖了Outlook 07。

Answer 5

＆＃34; Gmail仅接受内联样式。没有头标签，没有样式标签，只有内联＆＃34; 根本不是真的。因为Gmail似乎接受基本的元素样式，如下所示：

p{
text-align:right;
margin:10px;
}

您可以将它放在邮件头部的样式标记中，也可以使用内联样式。 Gmail接受边框半径，以及其他简单样式。您可以在样式标记中使用CD DATA和html注释，如下所示：

<style>
<!--
<![CDATA[
p{
    text-align:right;
    border:1px solid #ccc;
    margin:10px;
    border-radius:10px;
    margin:10px;

}
]]>
-->
</style>

Answer 6

虽然这对我来说意味着更多的工作，但是很高兴知道。

在我的情况下，我有＆＃34;垫片＆＃34;调用如下：

类=＆＃34;间隔物＆＃34;

所以我想现在我会改用它：

style =＆＃34; display：block！important;明确：两个！重要;＆＃34;

Gmail CSS样式

6 个答案: