0

まず、これはメール用なので頭にcssを入れられず、tableやtd、ulなどにだけ入れます。

コード スニペットと、IE、Firefox、および MS Outlook での表示のスクリーンショットを貼り付けます。

            <html>
             <head>
             </head>
             <body>
              <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
                 <tr bgcolor=#FF8100 valign="top">
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
                   <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
                 </tr>
                 <tr bgcolor=#FFCA99 valign="top">
                   <td>Review
                   </td>
                   <td> 
                     <ul style="margin: 0px 0px 0px 15px;">
                      <li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
                      <li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
                     </ul>
                   </td>
                 </tr>
                </table>
               </body>
              </html>

IE では見栄えがよくなりますが、Firefox では大きな余白があり、Outlook では箇条書きのごく一部しか表示されません。

いいえ:

IE ビュー

ファイアフォックス:

FFビュー

見通し：

Outlook ビュー

聴衆はこれらすべてのオプションを使用してこのメ​​ールを表示する可能性が高いと想定する必要があります。パディングを ul スタイルに入れてみたり、箇条書きの画像を作ってみたり、それを背景画像として使用したり、ul にスタイルを与えたりしませんでした... それもうまくいきませんでした。私が試したすべてのことは、3 回のメール ビューのうち少なくとも 2 回はひどいものに見えます。

助けていただければ幸いです。

(Gmail は、どの CSS が解釈されるかについて最も厳密であるため、Gmail の規則に従う必要があります。それらはここにあります -> http://www.campaignmonitor.com/css/ Android の Gmail では許可されないことがわかります。 list-style-x なので、どれも使えません. 緑のチェックマークが付いているものしか使えません.)

ありがとう！-ホリー

4

3 に答える 3

1

ul と li のパディング/マージンをリセットするだけでかなりうまくいきました! ありがとう@キーグ！

このコードで：

      <html>
     <head>
     </head>
     <body>
      <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
         <tr bgcolor=#FF8100 valign="top">
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
           <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
         </tr>
         <tr bgcolor=#FFCA99 valign="top">
           <td>Review
           </td>
           <td style="padding-left:25px;"> 
             <ul style="padding:0px;margin:0;">
              <li style="padding:0px;margin:0;">Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
              <li style="padding:0px;margin:0;">Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
             </ul>
           </td>
         </tr>
        </table>
       </body>
   </html>

IE、Firefox、および Outlook では次のように表示されます (上から順に)。これは、Outlook のビューのため完全ではありませんが、はるかに受け入れられます。

リセットあり

于 2012-12-17T19:19:47.340 に答える
1

パディングを ul ではなく td に配置します。おそらく ul 要素と li 要素のスタイルもリセットする必要があります

<html>
         <head>
         </head>
         <body>
          <table cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333; border-left: solid 1px #e9e9e9; border: thin groove #CCCCCC">
             <tr bgcolor=#FF8100 valign="top">
               <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>To Do</strong></td>
               <td style="border-bottom-style: groove; border-bottom-width: thin"><strong>Document</strong></td>
             </tr>
             <tr bgcolor=#FFCA99 valign="top">
               <td>Review
               </td>
               <td style="padding-left:15px;"> 
                 <ul style="padding:0px;margin:0;">
                  <li>Good Faith Estimate - outlines all the fees and costs associated with your loan</li>
                  <li>Uniform Residential Loan Application (If your property is in New York, Ohio or Mississippi, please sign this form and upload it to My Status or fax it back to me at @AGENT.FAX.)</li>
                 </ul>
               </td>
             </tr>
            </table>
           </body>
      </html>
于 2012-12-14T21:29:39.183 に答える
0

パディングは、すべての電子メール クライアントでサポートされているわけではありません。リスト項目間の正しいスペースを確保するために、リストにしないでください。ごめん。

<tr>
<td width="10">&bull;</td><td width="5" style="font-size:1px;">&nbsp;</td><td... content</td>
</tr>
<tr>
<td width="10" height="5" style="font-size:1px; line-height:1px;">&nbsp;</td> etc...

空の TD は IE では表示されず、font-size のない TD は IE のデフォルト (12px など) のサイズでレンダリングされます。空のテーブル セルで、高さおよび font-size と line-height のスタイルで空の行を宣言すると、アイテム間のスペースが修正されます。

于 2013-03-15T13:43:34.643 に答える