問題タブ [zurb-ink]

Zurb Inkテンプレートを使用して電子メールを送信しています。mailcatcherで (開発サーバーから)電子メールを表示するとすべて問題ないように見えますが、実稼働サーバーから (私の gmail アカウントへ) 電子メールを受信すると、CSS スタイルがすべて失われています。

CSS はすべてインラインで、Zurb の基本テンプレートを使用しています。

Zurb Ink を使用して、パネル クラスを使用してメール内のいくつかの重要な項目を呼び出すレスポンシブ メール レイアウトを作成しようとしています。一部の Android デバイスを除いて、ほとんどの場合、(Litmus を使用した) テストでは正しく表示されます。テーブルは、画面の表示可能領域を超えて右に拡張されます。できるだけ多くのデバイスで電子メールが正しく表示されるようにするために、非常に単純なレイアウトを使用しています...すべてのテーブルに単一の列があります。

http://zurb.com/ink/を使用して電子メール テンプレートを作成していますが、電子メールの端に 10 ピクセルの境界線が必要です。

.box-edge (これはカスタム クラスです) というクラスを使用して電子メールにパディングを追加しようとすると、パディングが追加されますが、画面のサイズが変更されると、画像のサイズが正しく変更されません。

ここに私が何を意味するかを示すためのフィドルがあります: http://jsfiddle.net/daimz/xspWL/2/

コードは次のとおりです。

HTML:

CSS:

メールを送信するときにテーブルが最も好まれるのはなぜだろうと思っていました。

編集:

http://zurb.com/ink/のテンプレートを調べていたところ、すべてにテーブルがあることがわかりました。私はブートストラップを使用するのが好きで、Zurb Ink がブートストラップ 3 と同様の機能 (応答性など) を備えていることを確認しました。ただし、すべてのテンプレートにはテーブルが含まれていました。

そこで、PHPで送信するHTMLメールにbootstrap 3（せめてCSS）を適用できないか検討を始めました。テーブルが最適な方法であるという記事を偶然見つけました。しかし、私はその理由を理解していません。

編集：

私を助けた別の投稿: HTML メールでテーブルが使用されるのはなぜですか? . @dystroy に感謝します。

メール スタイリングに関する別の包括的な記事: http://mailchimp.com/resources/guides/email-marketing-field-guide/。

一番！

HTML メールの作成では、Zurb Ink フレームワークを使用しています。

パネル内に複数の水平線を表示したいパネルがあります。例えば：

割り当て済み/未割り当ておよびテキストフォロー用のボタンがある場所。

このコードでは、パネルとボタンをパネル内に正常に作成しました。ただし、ボタンを2列しか取得できません。ボタンを 2 列だけにして、ボタンの後にテキストを表示するにはどうすればよいですか?

テーブルの端を下から丸めようとしていますが、間違った方法で丸められます。どうすればよいですか

これが私の試した結果です。真ん中も丸くなる。端だけ丸くするにはどうしたらいいですか？

電子メールから PDF を生成する (Zurb Ink テンプレート); ただし、常に単一ページの PDF が表示されます。

実行可能なテストケース:

複数ページの PDF を取得するにはどうすればよいですか?