2

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

6 回答 6

5

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

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

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

于 2013-10-24T17:36:50.493 回答
1

为了构建所提供的答案，除了内联 CSS 之外，您在使用displayGmail 移动应用程序时还会遇到问题。

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

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

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

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

于 2013-10-25T04:17:43.710 回答
0

“Gmail 只接受内联样式。没有头部标签，没有任何样式标签，只有内联”根本不是真的。因为 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>
于 2014-05-28T19:54:31.107 回答
0

You can easily make all CSS inline with campaignmonitors inline css tool But as jsuissa said, display:none does not work on gmail, it will be shown.

于 2013-11-13T14:58:09.500 回答
0

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

为了隐藏 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。

于 2014-01-07T08:37:41.270 回答
-1

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

就我而言，我调用了“间隔符”，如下所示：

类=“间隔”

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

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

于 2014-11-26T20:31:08.097 回答