Outlook 2007/2010で正しくレンダリングされるHTML

私は現在、次のHTMLを使用して下の画像をレンダリングしています。これは、背景画像がサポートされていないため、Outlookでは動作しません。私は、テーブルを使用してOutlookで要素を正しくレンダリングするように指示を受けましたが、これについてどうやって行くのか分かりません。あなたは、テーブルを使用する必要がありますし、使用しない見通し2007/2010" で正しくEmailerのは、Outlook 2007/2010で正しくレンダリングされるHTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     div, p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     div.box { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color:rgb(255,232,0); 
     } 
     div.box div.inner { 
      height:100%; 
      background:url("https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg") bottom right no-repeat; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
    <div class="box"> 
     <div class="inner"> 
      <p class="name">John</p> 
      <p>XYZ Company</p> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

出典

2012-04-14 RunLoop

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title>Render this</title> 
    <style type="text/css"> 
     p { 
      margin:0; 
      padding:0; 
      font-family: Helvetica; 
      font-size:14px; 
      color:#000; 
      font-weight:bold; 
     } 
     table { 
      padding:15px; 
      width:272px; 
      height:155px; 
      border:2px solid #000; 
      background-color: #fee800; 
     } 
     p.name { 
      margin-bottom:65px; 
     } 
    </style> 
</head> 
<body> 
<table> 
<tr><td>John Smith</td><td></td></tr> 
<tr><td><p>XYZ Company</p></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" /></td></tr> 
</table> 

</body> 
</html>

出典

2012-04-14 20:21:56 chadpeppers

私は上記の例のようにHTMLメールで表を使用しています。 email：http ：//www.campaignmonitor.com/css/ – chadpeppers

+1（私はそれを言うとは思わなかった）。残念ながら、電子メールクライアントはdivを好まない。 –

また、インラインCSSを使用することをお勧めします。 webappには独自のものがあるので、ほとんどのwebmailクライアントでは、おそらくhtml headの内容は無視されます。私は、Mailchimpは、スタイルシートをインラインに変換するオンラインパーサーを提供していると考えています。インラインスタイルの長いHTMLを書くのはかなり厄介なことでしょう。 – Halka

を下の画像をレンダリングするHTMLを提供した人に200懸賞金CSSを頭に入れたり別のCSSにしたりしてみてください。

<table bgcolor="#fee800" border="0" cellpadding="0" cellspacing="0" width="272" height="155" style="border: 2px solid #000; padding: 15px;"> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>John</b></font></td><td>&nbsp;</td> 
    </tr> 
    <tr> 
     <td><font face="Helvetica, Arial, sans-serif" style="font-size: 14px;"><b>XYZ Company</b></font></td><td><img src="https://s3.amazonaws.com/signoffmainbucket/8CA8EC1A-C1C5-4390-9FC4-649648AA26C8.jpg" alt="" /></td> 
    </tr> 
</table>

出典

2012-04-17 07:48:16 Tarun

Outlook 2007/2010で正しくレンダリングされるHTML

答えて

関連する問題