44

あなたが私のような人なら、これを読み終える頃には目がピクピクするでしょう。私はあなたを責めません。

クライアントから、レスポンシブ HTML メール テンプレートの開発を依頼されました。次の 2 つの仕様があります。

  1. できるだけ少ない画像を使用する
  2. できるだけ多くの「派手な css 対応機能」を使用します。ほとんどの場合、これはボックスの角が丸くなっていることを意味します。

この質問は、特に丸みを帯びた角の実行に関するものです。Gmail と Apple は CSS の丸みを帯びた角をサポートしており、Outlook ではベクター グラフィックが必要です。残りのプラットフォームでは、正方形のエッジを使用しても問題ありません。

Outlook を検出して実行する方法は次のとおりです。

<!--[if mso]><v:shape>...</v:shape><![endif]-->

Outlook 2000 に戻っても、魔法のように機能します。問題は、フォールバックの作成方法がわからないことです。直感はこう言っています。

<!--[if !mso]>...<![endif]-->

しかし、それは他のほとんどの電子メール クライアントによってコメントとして完全に無視され、ボックスから隅が完全に失われます。SO コミュニティのメンバーの皆さんにお願いします。MSO以外のすべてのプラットフォームにマークアップを展開することは可能ですか? おそらく、私が考慮していない、これを達成するためのより賢い方法がありますか? それとも、電子メールの HTML はまだ石器時代すぎて、このようなことを試みることができないのでしょうか?

4

4 に答える 4

63

多くの頭を悩ませた後、解決策を見つけました。これの代わりに：

<!--[if mso]><v:shape>...</v:shape><![endif]-->
<!--[if !mso]>[fallback goes here]<![endif]-->

これは非常にうまく機能します：

<!--[if mso]>
    <v:shape>...</v:shape>
    <div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->

    [fallback goes here]

<!--[if mso]></div><![endif]-->

MSO で非表示の div にフォールバックをラップし、代わりにベクター ソリューションをデプロイするだけです。

これが将来誰かに役立つことを願っています！

于 2013-08-16T13:21:04.860 に答える