Gmail CSS 样式答案

【问题标题】：Gmail CSS StylingGmail CSS 样式
【发布时间】：2013-11-03 13:03:57
【问题描述】：

我在使用 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>

【问题讨论】：

标签： html css email gmail html-email

【解决方案1】：

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

在我的例子中，我调用了“spacers”，如下所示：

class="间隔"

所以我想现在我会改用这个：

style="display: block !important; clear: both !important;"

【讨论】：

【解决方案2】：

“Gmail 只接受内联样式。没有头部标签，没有任何样式标签，只有内联” 根本不是真的。因为 Gmail 似乎接受基本元素样式，像这样：

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

您可以将它放在邮件头部的样式标签中，或者也可以使用内联样式。 Gmail 接受边框半径和其他简单样式。您可以像这样在样式标签中使用 CD DATA 和 html cmets：

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

}
]]>
-->
</style>

【讨论】：

【解决方案3】：

Gmail 不会尊重 display:none。您可以通过在元素上声明 display:none!important 内联来解决此问题，但这也毫无价值，因为您永远无法覆盖它。

为了隐藏 HTML 电子邮件中的元素并使其在 Gmail 中工作，您需要将其归零并调整 CSS 中的大小（Gmail 会忽略）。

这适用于单个表或嵌套表。您必须在没有任何内联声明的尺寸或定位的情况下编写所有代码，而不是 float:left.. 如果您需要在某些东西上设置尺寸，请在 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。

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

添加!important 声明也有帮助，但它可能会让你在 Outlook 中感到头疼，它会忽略该规则。

您可能想尝试其他方法以提高与内联 CSS 的兼容性。下面的示例将默认隐藏您的工具栏，对于支持媒体查询的电子邮件客户端，您可以通过反转它们来重新打开。

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

这个question 最初涵盖了同样的想法。

【讨论】：

【解决方案6】：

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

这应该会给你你需要的答案。 :)

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

【讨论】：