3

クライアントの指示に従って、このような効果を持つ電子ニュースレターをデザインしています。

overflow:hidden電子メールで JavaScript を使用する方法がないことはわかっているので、アンカー タグを使用して愚かな方法で作成しようとしました。適切なリンクをクリックすると、非表示の画像が表示領域までスクロールします。これが私のコードです：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>demot</title>
<style type="text/css">
.OF {
    display:block;
    max-height: 100px;
    overflow: hidden;
    white-space:nowrap;
}
</style>
</head>

<body>
<!-- Save for Web Slices (News_Letter_artwork.jpg) -->
<table id="Table_01" width="595" height="434" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="5">
            <img src="images/News_Letter_artwork_01.jpg" width="595" height="155" alt=""></td>
    </tr>
    <tr style="display:block;">
        <td>
            <img src="images/News_Letter_artwork_02.jpg" width="50" height="37" alt=""></td>
        <td>
            <A href="#tab_01"><span><font><img src="images/News_Letter_artwork_03.jpg" width="118" height="37" alt=""></font></span></A></td>
        <td>
            <A href="#tab_02"><span><img src="images/News_Letter_artwork_04.jpg" width="118" height="37" alt=""></span></span></A></td>
        <td>
            <A href="#tab_03"><span><img src="images/News_Letter_artwork_05.jpg" width="121" height="37" alt=""></span></span></A></td>
        <td>
            <img src="images/News_Letter_artwork_06.jpg" width="188" height="37" alt=""></td>
    </tr>
    <tr style="display:block; max-width: 595px; max-height: 186px; overflow: hidden; white-space:nowrap;">
        <td colspan="5">
            <h2><a name="tab_01" id="tab_01"></a></h2><img src="images/News_Letter_artwork_07.jpg" width="595" height="186" alt=""><p>
            <h2><a name="tab_02" id="tab_02"></a></h2><img src="images/News_Letter_artwork_07b.jpg" width="595" height="186" alt=""><p>
            <h2><a name="tab_03" id="tab_03"></a></h2><img src="images/News_Letter_artwork_07c.jpg" width="595" height="186" alt=""><p>
        </td>
    </tr>
    <tr>
        <td colspan="5">
            <img src="images/News_Letter_artwork_08.jpg" width="595" height="56" alt=""></td>
    </tr>
</table>
</body>
</html>

ほとんどのクライアントは div タグでサポートされないため、テーブルを使用してそれを作成するのにうんざりしています。実際には、すべてがブラウザで機能しますが、<a>タグは電子メール クライアントで からにhref置き換えられます。#tab_01http://mydomain/news.html#tab_01

電子メール クライアントでクリックすると、まったく必要のない新しいブラウザ ウィンドウが開きます。固定することは可能ですか？

私のメール送信手順は次のとおりです。

  1. ウェブサイト全体をサーバーにアップロードする
  2. ページを開く
  3. すべて選択してコピー
  4. 貼り付けてウィンドウを構成し、送信します。

私は何か悪いことをしましたか？Gmail、Hotmail (outlook.com)、Yahoo、Apple メール、Outlook 2011 for Mac をテストしました。

4

3 に答える 3

0

  あなたがこの目標を達成することは不可能だと思います。

  ほとんどの電子メール クライアントは、ヘッドまたはボディ (特に gmail) のスタイル タグをサポートしていません。また、前述のように、インライン CSS でイベントまたはセレクターを使用することはできません。したがって、:focus セレクターでは実行できません。参考までに、ほとんどの電子メール クライアント(Web ベースのものとそうでないもの)でサポートされている css

  のこのリンクを提供できます。

于 2013-04-09T08:06:10.713 に答える
0

以前にメールでアンカー リンクをテストしたことがありますが、サポートが不十分であることがわかりました。記憶によると、おそらく Mac クライアントでは問題なく動作していましたが、Gmail または Outlook では惨めに失敗しました。

しばらく前に見たことを覚えている解決策がありましたが、それはあなたがやろうとしていることとまったく同じでしたが、Mac クライアントでしか機能しませんでした。

別の解決策の 1 つは、アンカー リンクと Web バージョンのメールを組み合わせることです。このようにして、それらは同じ電子メールに移動し (現在はブラウザーにあります)、目的のアンカーを指します。

それ以外の場合は、ブラウザーに移動したくない場合は、セクションを非表示にすることを避け、アンカー リンクがサポートされていない場所を把握する必要があります。読者は下にスクロールする必要があります。

于 2013-04-09T17:14:15.393 に答える