Outlook電子メールテンプレート1

Outlookのテンプレート電子メールを作成しようとしましたが、問題があります。Outlook電子メールテンプレート1

電子メールを作成するために使用するテーブルには、+画像がフォントを認識しないため、余白/パディング（1px）があります。私が欲しいもの

私はパディングを試す：0、マージン：-1、テーブルレイアウト：固定、他方は考えています。ここで

は私のコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html> 
 
    
 
<head> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
 
    <title>Single-Column Responsive Email Template</title> 
 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
    <style> 
 
    @import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800); 
 

 
\t table{ 
 
    \t border-spacing: 0; 
 
    \t border: none; 
 
    } 
 
\t td{ 
 
\t margin: 0px; 
 
\t  
 
\t  border: none; 
 
\t 
 
\t } 
 
\t tr{ 
 
\t \t margin: 0px; 
 
\t \t border: none; 
 
\t 
 
\t } 
 
\t img{ 
 
\t \t display:block; 
 
\t } 
 
\t p{ 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t font-size: 14px; 
 
\t \t color: #1f2327; 
 
\t } 
 
    </style> 
 
</head> 
 
    
 
<body> 
 
    
 
<table border="0" style="height: 790px; width: 610px; border-collapse: collapse; " cellpadding="0" cellspacing="0" > 
 
\t \t <tr> 
 
\t \t \t <td width="90" style="text-align: right; width: 90px; height: 781px; padding:0; "> 
 
\t \t \t \t <img src="https://i.imgur.com/MLPTttG.png"> 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t <table width="527" border="0" cellpadding="0" cellspacing="0"> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td width="527" style=" width: 527px; height: 19px;"> 
 
\t \t \t \t \t \t <img src="https://i.imgur.com/wGaQ4Vf.png" style="width: 100%;"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td style="height: 738px; margin: 20px;"> 
 
\t \t \t \t \t \t \t a 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t \t <td style="width: 527px; height: 24px; background-color: #007034;"> 
 
\t \t \t \t \t \t \t <img src="https://i.imgur.com/vrb1QrE.png"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </table> 
 
\t \t \t </td> 
 
\t \t \t <td style="width: 37px; height: 781px;"> 
 
\t \t \t \t <img src="https://i.imgur.com/nVuB7Wk.png"> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
</table> 
 
</body> 
 
</html>

出典

2017-11-02 T. Stefan

結果は正確には何ですか？ – Maharkus

@maharkus https://imgur.com/kQIrH2T –

https://www.campaignmonitor.com/css/text-fonts/woff2/ カスタムフォントは電子メールで広くサポートされていません。人々は、主にカスタムフォントの画像を使用します。ピクセルギャップについては、わかりませんが、おそらく電子メールクライアントの恐ろしいCSSサポートと関係していることもあります。 – Maharkus

まず、これらはかなり基本的なもの、と彼らはtableとtdパディング問題を含む見通しの問題、の広い範囲をカバーし、あなたのCSS

#outlook a{ 
     padding:0; 
    } 
    .ReadMsgBody{ 
     width:100%; 
    } 
    body{ 
     width:100% !important; 
     min-width:100%; 
     -webkit-text-size-adjust:100%; 
     -ms-text-size-adjust:100%; 
     -webkit-font-smoothing: antialiased; 
    } 
    v*{ 
     behavior:url(#default#VML); 
     display:inline-block; 
    } 
    .ExternalClass{ 
     width:100%; 
    } 
    td{ 
     border-collapse: collapse!important; 
    } 
    .ExternalClass, 
    .ExternalClass p, 
    .ExternalClass span, 
    .ExternalClass font, 
    .ExternalClass td, 
    .ExternalClass div{ 
     line-height:100%; 
    } 
    a img{ 
     border:none; 
    } 
    a { 
     text-decoration:none !important; 
    } 
    img{ 
     display:block; 
     outline:none; 
     text-decoration:none; 
     border:none; 
     -ms-interpolation-mode: bicubic; 
    } 
    table{ 
     border-spacing:0; 
     border-collapse: collapse !important; 
     mso-table-lspace:0pt; 
     mso-table-rspace:0pt; 
    }

にいくつかの条件文を追加します。

私が取り組んでいきたいのは、カスタムフォントです。カスタムフォントは、特にOutlookの場合は、やめるのが大変難しいでしょう。普遍的なフォントスタックに固執する方がずっと良いです。あなたがGoogleのウェブフォントを使用して死んでいる場合は警告が表示されますが、それは見えないし、行動したり、Outlookで同じように見えることさえあります。

編集：あなたも気づいたDOCTYPEは厳格です。私は移行をお勧めします：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <meta name="format-detection" content="date=no"/> 
    <meta name="format-detection" content="telephone=no"/> 
    <!--[if !mso]><!-- --> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <!--<![endif]-->

このヘッダー部分は、ここ数年間、私にはとても良いことでした。

出典

2017-11-02 18:47:57 scoopzilla

Outlook電子メールテンプレート1

答えて

関連する問題