2

HTML 電子メールの箇条書きをシミュレートする表の使用を検討しています。以下のコードは、Outlook 2010 および 2013 を除くすべてのクライアントで適切に機能します。

line-height を他の CSS と共に使用して、すべてのセル間隔を削除しました。ただし、Outlook 2010 では、行の高さの宣言は無視され、既定の (増加した) 間隔が表示されます。

Outlookに行の高さを尊重させるCSSソリューションがあるかどうかは誰にもわかりませんか?

<table style="border-collapse:collapse; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px; padding-top: 0px;" border="0" cellspacing="0" cellpadding="0" width="100%">
                        <tbody>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; padding-bottom: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; padding-bottom: 0px; margin: 0px; line-height: 18px;">A</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; margin: 0px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">B</td>
                          </tr>
                            <tr>
                                <td align="right" valign="top" style="padding-left: 18px; width: 16px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; margin: 0px;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
                                <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; margin: 0px; line-height: 18px;">C</td>
                            </tr>
                        </tbody>
                    </table>
4

2 に答える 2

4

解決

Outlook 2007 以降 (後述) には副作用があるため、一般的に、これはリスト内の箇条書きのサイズをカスタマイズする合理的な方法ではありません。ただし、この特定のケースでは、弾丸のキャラクターに Trebuchet MS の代わりに Arial を使用することが適切な解決策になる場合があります。

<table style="font-family: 'trebuchet ms', arial, helvetica, sans-serif; font-size: 13px;" border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">A</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">B</td>
        </tr>
        <tr>
            <td width="16" height="18" align="right" valign="top" style="padding-left: 18px; font-family: arial, helvetica, sans-serif; margin: 0px; background-color: #77ddaa;"><span style="font-size:16px; line-height: 18px;">&bull;</span></td>
            <td style="padding-left: 14px; font-family: 'trebuchet ms', arial, helvetica, sans-serif; color: #400400; font-size:13px; line-height: 18px; background-color: #77aadd;">C</td>
        </tr>
    </tbody>
</table>

説明

箇条書き文字に を使用するとfont-size:16px、Outlook 2007 以降では、指定されたものに関係なく、少なくとも 22 ピクセルの高さで各行をレンダリングする必要がありますline-height。箇条書きの を 13pxに縮小するfont-sizeと、線は 18px の高さでレンダリングされました。を 20pxにfont-size増やすと、レンダリングされる行の高さは 26px になります。

これは、Outlook 2007 以降がこれらのフォント サイズで可能なテキスト文字の完全なセットをレンダリングするために必要な高さのようです (箇条書き文字自体が使用可能な高さのほとんどを使用していなくても)。数値は、使用する font-family によって異なります。

アリアル

font-size    minimum line-height     difference
   10               13                  +3
   11               14                  +3
   12               15                  +3
   16               18                  +2
   20               23                  +3
   30               35                  +5
   60               67                  +7

トレビュシェットMS

font-size    minimum line-height    difference
   10               15                  +5
   11               16                  +5
   12               18                  +6
   16               22                  +6
   20               26                  +6
   30               38                  +8
   60               76                  +16

関連情報

HTML テーブルの場合、CSS スタイルではなく HTML 属性を使用して幅と高さを指定します。Outlook の最新バージョンは、スタイルを無視widthします。height

line-height場合によっては、表のセルにスタイル (および場合によっては HTML属性) を追加するとheight、目的の行の高さを強制するのに役立ちます。

Outlook でサポートされていない機能のリストの一部。

于 2012-08-18T14:30:13.370 に答える
0

line-heightOutlook で作業することはできません。ただし、できることは、テーブルをそれぞれの列に分割することです。つまり、&bull;内部に aを含める必要はありませんspan。tdを保持する を作成するのではなく、 を作成します&bull;。そこで table プロパティv-align:top/middle/bottom;を使用して、リスト項目を適切に並べることができます。line-heightこの方法では、プロパティを使用する必要はありません。

于 2012-08-19T02:22:54.860 に答える