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 はインライン スタイルのみを受け入れます。head タグも style タグも一切なく、インラインのみです。つまり、メディアクエリはありません。

これにより、必要な答えが得られるはずです。:)

これも大きな助けになります: http://www.campaignmonitor.com/css/

于 2013-10-24T17:36:50.493 に答える
1

提供された回答に基づいて構築するには、インライン CSS に加えてdisplay、Gmail モバイル アプリで使用する際に問題が発生します。

宣言を追加する!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 は、border radius やその他の単純なスタイルを受け入れます。次のように、スタイル タグで 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

Campaignmonitorsインライン css ツールを使用すると、すべての CSS を簡単にインラインにすることができ ます。

于 2013-11-13T14:58:09.500 に答える
0

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 を対象としています。

于 2014-01-07T08:37:41.270 に答える
-1

それは私にとってより多くの仕事を意味しますが、知っておくとよいでしょう.

私の場合、次のように「スペーサー」を呼び出しました。

クラス="スペーサー"

だから私は今、代わりにこれを使うと思います：

style="display: ブロック !重要; クリア: 両方 !重要;"

于 2014-11-26T20:31:08.097 に答える