0

会社用の HTML メール テンプレートを設計しています。このような古いhtmlテーブルハックを使用して、背景画像の上にテキストを配置しています

<table>
  <tr>
    <td></td>
    <td rowspan="2">Background image goes here</td>
  </tr>
  <tr>
    <td colspan="2">Text will be displayed over top of the background image</td>
  </tr>
</table>

これは、Firefox などの Web ブラウザでは問題なく動作しますが<td>、Chrome と Safari では、最初の行の空白の幅が 1px で、デザインが壊れていることに気付きました。

メールテンプレートの設計で効果を実証するために、 jsFiddleを作成しました。プロモーション、ギフトカード、および連絡先へのリンクがある行は、効果が最も顕著です。その行の白い端が 1px オフセットされていることがわかります。問題を確認するには、Chrome または Safari を使用する必要がある Firefox では問題ないように見えます。

電子メールで背景画像を使用するこの手法は、私が見つけた最も互換性のある方法です。より良い方法はありますか？<td>Webkit ブラウザで幅 0 としてレンダリングする方法はありますか?

4

2 に答える 2

1

すべての (関連する) ブラウザーとクライアントでメールの背景画像を機能させる唯一の方法は、背景画像を使用しないことです。

バナー画像をスライスしてさらにいくつかのセルを追加することで、フィドル作業でレイアウトを作成できるはずです。丸みを帯びた角を機能させた方法と同様に...

于 2013-06-10T22:34:18.890 に答える
0

余分な 1px が時々表示されます。

積み重ねたテーブルと margin:auto は、ピクセルから移動できます。

テーブルに境界線を設定して、テーブルがどこにあるかを確認します。空のサイズの td ではなく、テーブル内のマージンを管理できます。 http://jsfiddle.net/F9ZjT/1/ 

/* removed left td and put 20px margin on row links for example. + borders to show tables area */
于 2013-06-10T23:22:40.163 に答える