2017-07-30 1 views
3

Webフォーム用に生成されたHTMLコードに問題があります。
Outlook以外のすべてのプログラムで動作します。Outlook 2016でHTML書式を修正する方法

これを修正する方法はありますか? 私本当に顧客は、このように電子メールを取得することをたくないので:/

MY HTMLのCODE:

<div class="wrapper"> 
<div class="container"> 
<div class="inner"> 
<div class="header sitename"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></div> 
<p>Schönen guten Tag {name},<br /> Ihre Anfrage ist bei uns eingegangen. Wir bemühen uns um eine schnelle Antwort, um Ihnen weiterhelfen zu können. Sie hören bald wieder von uns!</p> 
<div class="footer">CENSORED</div> 
</div> 
</div> 
</div> 

MY CSS:

/* 
All classes will be replaced with style attribute. 
This is done because some web mail (included google mail) strike out all style reference. 

Due to this replacement the following statements will not work: 
#id { color: red; } 
table { border: 1px solid black; } 

Related documentation: http://www.fox.ra.it/forum/enquiries-processors/11143-e-mail-notification-models.html 
*/ 


body 
{ 
     background-color: #fafafa; 
} 


.wrapper 
{ 
    width: 100%; 
    padding: 24px 0 24px 0; 
    background-color: #fafafa; 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
} 

.container 
{ 
    width: 90%; 
    max-width: 680px; 
    min-width: 280px; 
    border: 1px solid #dddddd; 
    background-color: #ffffff !important; 
    box-shadow: 0 4px 8px rgba(192, 192, 192, 0.9); 
    margin: auto; 
} 

.inner 
{ 
    color: #505050; 
    font-size: 13px; 
    padding: 24px; 
     background-color: #ffffff; 
} 

.sitename 
{ 
    font-size: 30px; 
    line-height: 34px; 
} 

.header 
{ 
    border-bottom: 1px solid #dddddd; 
    margin-bottom: 32px; 
    padding-bottom: 8px; 
     background-color: #ffffff 
} 

.fields-list 
{ 
    padding: 0; 
    list-style-type: none; 
} 

.field-element 
{ 
    list-style-type: none; 
} 

.field-title 
{ 
    background-color: #eeeeee; 
    padding: 4px; 
    font-weight: bold; 
    font-size: 13px; 
    margin: 0; 
} 

.field-content 
{ 
    margin: 4px 4px 16px 4px; 
} 

.field-table-href 
{ 
} 

.footer 
{ 
    border-top: 1px solid #dddddd; 
    margin-top: 32px; 
    padding-top: 8px; 
    font-size: 12px; 
    font-style: italic; 
    color: #707070; 
     background-color: #ffffff 
} 

に見えますOutlookのこのようにenter image description here

しかし、それは次のようになります。私は本当に誰かがこれで私を助けることができることを願っています:(電子メールクライアントの

答えて

1

最良の方法は、あなたが言ったようにインラインまたはすべてのCSSを行い、表を使用することです。 OutlookはDIVで動作しません。

このコードを実行すると、あなたのテーブルと同じことがわかります。注意すべきことは、OutlookはCSS3の要素(境界線の半径、影など)を読み取らないことです。あなたはまだ頭の中でCSSを使うことができますが、それをサポートするいくつかの電子メールクライアントによって読み込まれます。

<body style="background-color: #fafafa;"> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="wrapper" style="width: 100%;"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="padding: 24px 0 24px 0;background-color: #fafafa;font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;"> 
 
\t 
 
\t \t <table width="90%" border="0" cellspacing="0" cellpadding="0" style="width: 90%;max-width: 680px;min-width: 280px;border: 1px solid #dddddd;background-color: #ffffff !important;box-shadow: 0 4px 8px rgba(192, 192, 192, 0.9);margin: auto;"> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
\t \t 
 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td class="inner" style="color: #505050;font-size: 13px;padding: 24px;background-color: #ffffff;"> 
 
\t 
 
\t \t <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="font-size: 30px;line-height: 34px;color: #505050;border-bottom: 1px solid #dddddd;margin-bottom: 32px;padding-bottom: 8px;background-color: #ffffff"><img src="CENSORED" width="168" height="47" alt="CENSORED" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="color: #505050;font-size: 13px;padding: 24px 0px; background-color: #ffffff;">Schönen guten Tag {name},<br /> Ihre Anfrage ist bei uns eingegangen. Wir bemühen uns um eine schnelle Antwort, um Ihnen weiterhelfen zu können. Sie hören bald wieder von uns!</td> 
 
    </tr> 
 
    <tr> 
 
     <td style="border-top: 1px solid #dddddd;margin-top: 32px;padding-top: 8px;font-size: 12px;font-style: italic;color: #707070;background-color:#ffffff;">CENSORED</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
\t 
 
    
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
    
 
    
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
\t 
 
    
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
</body>

これはあなたのために働くなら、私に教えてください。

+1

ありがとうございます:) – YoKoGFX

+0

メールクライアントの95%がメディアクエリー(Gmailを含む)をサポートしていますので、メディアクエリーを使用してメールをさらに美しくすることができますが、サポートしていないメールクライアントのフォールバックファンシーなもの。ハッピーコーディングブロウ。 – Syfer

3

たくさんのインラインあなたのスタイルを置く必要がありますので、あなたの電子メールから<style>タグを取り除く enter image description here

これはMailchimpが提供するようなCSS Inliner Toolで自動的に行うことができます。

+0

CSSはインラインです...これはPHP経由で行われます:) – YoKoGFX

+0

HTMLコードにはインラインCSSはありません。 CSS内にあるスタイルを参照します。これはおそらく問題です。 –

+0

CSSはインラインになっていますが、より良い概観のために私はこの方法で投稿しました... – YoKoGFX

関連する問題