4

私はすでに数時間これを修正しようとしてきましたが、問題を見つけることができないようです.

低解像度のデバイスで適切にラップする必要があるこの HTML メール署名があります。

これは、大画面デバイスでどのように表示されるかを示すモックアップです。 ここに画像の説明を入力

これは、小さな画面のデバイスでどのように表示されるかを示すモックアップです。 ここに画像の説明を入力

これはマークアップです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
  <table width="100%">
   <tr>
    <td>

      <!-- TEXT CELL -->
      <table align=left width=160>
       <tr>
        <td>
          <p>
            <span style='font-size:12.0pt;font-family:"Times New Roman","serif"; mso-fareast-font-family:"Times New Roman"'>sep</span>
          </p>
        </td>
      </tr>
    </table>

    <!-- TEXT CELL -->
    <table align=left width=160>
     <tr>
      <td>
        <p>
          <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
          mso-fareast-font-family:"Times New Roman"'>ult</span>
        </p>
      </td>
    </tr>
  </table>

  <!-- TEXT CELL -->
  <table align=left width=160>
   <tr>
    <td>
      <p>
        <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
        mso-fareast-font-family:"Times New Roman"'>tur</span>
      </p>
    </td>
  </tr>
</table>

<!-- TEXT CELL -->
<table align=left width=160>
 <tr>
  <td>
    <p>
      <span style='font-size:12.0pt;font-family:"Times New Roman","serif";
      mso-fareast-font-family:"Times New Roman"'>ura</span>
    </p>
  </td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

問題は Web クライアントにあります。何らかの理由で、これら 4 つのテーブルのそれぞれの隣に追加の HTML 要素が常に追加されます。 ここに画像の説明を入力

そして、これらは結果です：

MS Outlook 2007 (正しく表示): ここに画像の説明を入力

Apple GMail クライアント (画面の解像度が低いため、適切に表示され、ラップされます): ここに画像の説明を入力

Outlook Web (レイアウトを壊す余分な HTML 要素があります。詳細は写真に示されています): ここに画像の説明を入力

GMail Web (Outlook Web に似ています): ここに画像の説明を入力

また、これらを Litmus でテストしたところ、すべて良好に見えたことにも言及したいと思います。これらの「現実世界」の状況で物事が異なる理由はわかりません。

HTML署名を入れる私のプロセスに関連している可能性があります：

  1. 署名を含む HTML ページを開く
  2. そのページ内のすべてのコンテンツを選択します (ctrl + A)
  3. すべてのコンテンツをコピー (Ctrl+C)
  4. MS Outlook 2007 を開く
  5. [ツール] -> [オプション] -> [メール形式] -> [署名] に移動します
  6. 新しい署名 -> コンテンツをテキストエリアに貼り付け -> 新しく作成した署名を保存します。
4

2 に答える 2

2

あなたが求めていることは、署名で Outlook '07 では実行できないと確信しています。

これは、Outlook '07/'10/'13 が Microsoft Word エンジンを使用し、送信後に独自の迷惑メール (p msoNormal タグ) を追加するためです。送信後に追加されるため、インライン CSS は使用できません。HTML メールのデザインでは、多くの場合、デザイナーはスタイル タグにスタイルを追加して、Outlook が機能することを予期して、これらの不要なタグをゼロにします。署名のみを使用しているため、これは機能しません。署名 html にタグを含めてみることもできますが<style>、うまくいくかどうかは疑問です。

この種の動作を模倣するための最良の提案は、&nbsp;. 非常にハックな方法ですが、Outlook '07 から送信する場合、「フローティング」の唯一のオプションである可能性があります。例：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      Text&nbsp;1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;3&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Text&nbsp;4&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </td>
  </tr>
</table>

このようなものも機能する可能性があります（間違いなくはるかにきれいです）が、私はそれをテストしていません：

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <span style="width:150px;">Text 1</span>
      <span style="width:150px;">Text 2</span>
      <span style="width:150px;">Text 3</span>
      <span style="width:150px;">Text 4</span>
    </td>
  </tr>
</table>
于 2014-03-10T18:47:37.737 に答える