web-dev-qa-db-ja.com

CSSのパディングがOutlookで機能しない

メールテンプレートに次のhtmlがあります。

MS OutlookとGmailで同じように異なるビューを取得しています。

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">
    <span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span></td>
</tr>

In gmail

In Outlook

これを修正する方法は？

htmlcssemailoutlookoutlook-2010
45
Mukesh

私はフォローに変更し、それは私のために働いた

<tr>
    <td bgcolor="#7d9aaa" style="color: #fff; font-size:15px; font-family:Arial, Helvetica, sans-serif; padding: 12px 2px 12px 0px; ">                              
        <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0">               
            <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>                    
            <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>              
        </table>                    
    </td>
</tr>

実際に変更されたものをBsalexリクエストに基づいて更新します。 spanタグを置き換えました

<span style="font-weight: bold;padding-right:150px;padding-left: 35px;">Order Confirmation </span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span style="font-weight: bold;width:400px;"> Your Confirmation number is {{var order.increment_id}} </span>

次のようなテーブルおよびtdタグを使用

   <table style="width:620px; border:0; text-align:center;" cellpadding="0" cellspacing="0"> 
      <td style="font-weight: bold;padding-right:160px;color: #fff">Order Confirmation </td>
      <td style="font-weight: bold;width:260px;color: #fff">Your Confirmation number is {{var order.increment_id}} </td>
   </table>
16
Mukesh

残念ながら、EDM（ 電子ダイレクトメール ）に関しては、Outlookが最悪の敵です。一部のバージョンでは、セルのコンテンツがセルの寸法を決定するときにパディングを尊重しません。

メールクライアント全体で最もconsistent結果を得るアプローチは、空のテーブルセルをパディング（私は知っている、恐怖）として使用することですが、 Outlookの一部のバージョンでは、空のセルの高さ/幅の宣言を考慮していないため、これらのテーブルを目的の寸法の空白の画像で埋めることができます。

EDMは面白くないですか？ （いいえそうではありません。）

48
monners

Emailer/newsletterである電子メールテンプレートにHTMLを作成するために、padding/marginは電子メールクライアントでサポートされていません。 1x1サイズの空のgif画像を使用して使用できます。

<tr>
  <td align="left" valign="top" style="background-color:#7d9aaa;">
    <table width="640" cellspacing="0" cellpadding="0" border="0">
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
        <td align="right" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;"><a href="#" style="color:#ffffff; text-decoration:none; cursor:pointer;" target="_blank">Order Confirmation</a></font></td>
        <td align="left" valign="top" width="200"><img style="display:block;" src="images/spacer.gif" width="200" height="1"  alt="" /></td>
        <td align="left" valign="top"><font face="arial" color="#ffffff" style="font-size:14px;">Your Confirmation Number is 260556</font></td>
        <td align="left" valign="top"><img style="display:block;" src="images/spacer.gif" width="20" height="1"  alt="" /></td>
      </tr>
      <tr>
        <td align="left" valign="top" colspan="5"><img style="display:block;" src="images/spacer.gif" width="1" height="10"  alt="" /></td>
      </tr>
    </table>
</td>
</tr>
8
Rahul J. Rane

ただ使う
<Table cellpadding="10" ..> ... </Table>
MS-Outlookではpx.Worksを使用しないでください。

5
Raj_89

代わりにこれを行います：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
      <td bgcolor="#7d9aaa" width="40%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Order Confirmation
      </td>
      <td bgcolor="#7d9aaa" align="right" width="60%" style="color: #ffffff; font-size:15px; font-family:Arial, Helvetica, sans-serif; font-weight: bold; padding:12px;">
        Your Confirmation number is {{var order.increment_id}}
      </td>
  </tr>
</table>

大きなパディングと&nbsp;を使用するよりも、2つのセルを使用してコンテンツを揃えることをお勧めします。

3
John

私は同じ問題を抱えていて、実際にはborderの代わりにpaddingを使用しました。

3
Jacob

Outlookではパディングは機能しません。空白の画像を追加する代わりに、左にパディングするための要素/テキストの前に複数のスペース（＆nbsp;）を使用することができますスペースだけを含むdivを追加します（＆nbsp;）。これは動作します!!!

3
Subbu

Litmusで多くのテストを行った後、すべてのメールリーダーで完璧なレンダリングを行う方法を見つけることができませんでしたが、私が見つけたより良いソリューションは次のとおりです。

<table  width="100%" cellpadding="0" cellspacing="0" style="background-color:#333;color:#fff;border-radius:3px;border-spacing:0;" >
    <tr>
        <td style="width:12px;" >&nbsp;</td>
        <td valign="middle" style="padding-top:6px;padding-bottom:6px;padding-right:0;padding-left:0;" >
            <span style="color:#fff;" ><strong>Your text here</strong> and here</span></a>
        </td>
        <td style="width:12px;" >&nbsp;</td>
    </tr>
</table>

このコードでは、paddingをエミュレートすることを目指しました：6px 12px;

左右のパディングを処理する2つの「12pxテーブル列」があります。

そして、「padding：6px 0;」を使用しています。私のtdコンテンツでは、上部と下部のパディングを管理するために：Outlook 2010と2013はこれを無視し、独自のパディングを使用します。

テキストはOutlook 2010とOutlook 2013で完全に揃うことはありませんが（上から少し遠すぎます）、他のすべての電子メールリーダーで動作します：Apple Mail、Gmail、Outlook 2011（yes ..） 、Hotmail、Yahooなど。

プレビュー画像：Outlook 2010および2013プレビュー

プレビュー画像：Gmail、Appleメールなど

2
Fab

私の解決策は、パディングが100％サポートされていないため、透明なスペーサーgifで必要なもの/空のものを使用することです。

<td width="2" style="font-size:1px; line-height:1px;" bgcolor="#FFFFFF">                                                                                                       
   <img width="2" border="0" src="spacer50.gif" style="display:block; 
   padding:0; margin:0; border:none;" />                                                                                                
</td>
0
Richard Clifford

パディングを含むすべてのスタイリングは、スパンではなくtdに追加する必要があります。

別の解決策は、テキストを<p>text</p>に入れてマージンを定義し、必要なパディングを提供する必要があります。

例えば：

<p style="margin-top: 10px; margin-bottom: 10; margin-right: 12; margin-left: 12;">text</p>
0
Ahmed Shahin

display:inline-block;を試しましたか？

0
Carol McKay