電子メールで見たCSSスタイルはありません

StackOverflow https://stackoverflow.com//questions/20007948

質問

次のHTMLページがMUTT.Iを使用してEメールアドレス（Yahoo / Gmail）の場合、CSSスタイルが表示されません。普通のテーブルを参照してください。どうしてこんなことに ？私は何かがありませんか？

mutt -e "set content_type=text/html" me@mail.com -s "Test" < Test.html
.

test.html 

<!DOCTYPE html>
<html>
<head>
<style>
rd{ color: red; }
gn{ color: green; }
body { background-color:#E0E0E0; font-family: helvetica;font-size: 15px;}
</style>
</head>
<body>
<table border="1" align ="left">
<tr><th>No.</th><th>Item</th></tr>
<tr><td>1</td><td><gn>abc</gn></td></tr>
<tr><td>2</td><td><rd>ghi</rd></td></tr>
</table>
</body>
</html>
.

役に立ちましたか？

解決

HTML-Eメールは、DIVとPタグが必ずしも予想通りに動作しない点に非常に限られています。独自のタグを作成しようとすることは、単にトラブルを求めています。

あなたの2つのテーブルセルは代わりにこのように見えるべきです：

<tr><td>1</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#007700;">abc</td></tr>
<tr><td>2</td><td style="font-family: Helvetica, Arial, sans-serif; font-size: 15px; color:#770000;">ghi</td></tr>
.

CSSを常にインライン化することに加えて、最大限のメールクライアントサポートには6桁の16進数を使用する必要があります。すべてのテーブルセルでフォントスタイルを再宣言する必要もあります。そのような冗長性は、残念ながら、HTML-Eメールで必要なものです。

フォントスタックを忘れないでください。また、ReaderにHelveticaがインストールされていると仮定しているので、

他のヒント

HTML電子メールでCSSを含める方法は、インラインスタイルを使用することです。

    <!DOCTYPE html>
    <html>
    <body style='background-color:#E0E0E0; font-family: helvetica;font-size: 15px;'>
        <table border="1" align="left" style="color:red;">
            <tr><th>No.</th><th>Item</th></tr>
            <tr><td>1</td><td><gn>abc</gn></td></tr>
        </table>
    </body>
    </html>
.

ref： http://www.htmlgoodies.com/beyond/css/ARTIP.PHP / 3679231

このチュートリアル HTML Emailsの入門 tutsplus これは古いチュートリアルですが、本当に役に立ちました。

頑張ってください。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top