Как связать элементы уровня блока в html-письмах?

Question

Какой лучший способ сделать весь блок контента кликабельным в html-письме, чтобы он также работал в Outlook (2003, 2007, 2010).

Например, у меня есть этот Call-Действие:

До сих пор я придумал следующее:

  <table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
    <!-- NAVIGATION AREA START -->
    <tr>
      <td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
        <div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
            <a href="http://${servername}/" style="text-decoration:none;color:#fff;">
                LEARN MORE ABOUT ABOUT THIS
            </a>
        </div>
      </td>
      <td width="160">
        <table cellpadding="0" cellspacing="0" height="24">
            <tr>
                <td>
                    <div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
                        <a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
                            CLICK HERE
                        </a>
                    </div>
                </td>
                <td>
                    <img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
                </td>
            </tr>
        </table>
      </td>
    </tr>
    <!-- NAVIGATION AREA END -->
  </table>

Проблема в том, что вся область в пределах пунктирной границы должнабыть кликабельным.Я попытался обернуть весь table тегом a, но это не работает в Outlook или IE (это работает в Firefox).

Или рассмотрим следующее:

<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
    <tr>
        <td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
            <p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
                <strong>FAQ</strong>
            </p>
            <p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
                Learn more about our services.
            </p>
        </td>
        <td align="center" style="padding-bottom: 15px; padding-top: 15px;">
            <p style="margin-top: 0;margin-bottom: 0;">
                <img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
            </p>
        </td>
    </tr>
</table>

Здесь также должен быть кликабелен весь блок (в пределах белой границы), а не только отдельные строки текста.

Как бы вы поступили, учитывая плохую поддержку CSS в Outlook 2007/2010(например, нет display CSS-свойства)?

Итог: Как связать элемент уровня блока без возможности обернуть его с помощью a (пробовал с table и div) или используя display: block;?

Answer 1

Этот ответ будет направлен на то, чтобы показать, как все различные параметры отображаются в Outlook (2013), начиная с «лучшего» решения, найденного до сих пор :

<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
        Go to some great website!
    </a>
</td>
</tr></table>

Это будет выглядеть так:

Или с аннотированной ссылкой для ссылки:

Да, это отстой: вы хотите, чтобы весь блок был кликабельным. В основном я здесь, чтобы сказать вам, что ответ на вопрос " как связать элементы блока (совместимый с outlook) " таков: это невозможно, не без обходных путей.

---

В поддержку моей заявки (PS. Я весьма приветствую всех, кто доказывает эту претензию неправильно!), Вот все варианты, которые я пробовал, с их соответствующими визуализациями в Outlook. Я также пытался включить некоторые решения, предложенные в других ответах.

Вот код, который я использовал для генерации электронных писем:

<html>
    <head>
        <title>My e-mail</title>
    </head>
    <body>
        <table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
            <tr>
                <td style="padding: 15px;">

                    <p>1. The "best" text-only version I've found:</p>
                    <table width="100%" style="background-color: #ccc;"><tr>
                    <td style="padding: 15px; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                            Go to some great website!
                        </a>
                    </td>
                    </tr></table>

                    <hr />
                    <p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
                    </a>

                    <hr />
                    <p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
                    </a>

                    <hr />
                    <p>3. Attempt to link the entire table. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <table width="100%" style="background-color: #ccc;"><tr>
                        <td style="padding: 15px; text-align: center;">
                                Go to some great website!
                        </td>
                        </tr></table>
                    </a>

                    <hr />
                    <p>5. Attempt to link the entire div. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <div style="background-color: #ccc; padding: 15px; text-align: center;">
                            Go to some great website!
                        </div>
                    </a>

                    <hr />
                    <p>6. Setting anchor tag to display as a block. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
                        Go to some great website!
                    </a>

                    <hr />
                    <p>6. Hacking with line-height, does not work.</p>
                    <div style="background-color: #ccc; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
                            <span style="vertical-align: middle;">Go to some great website!</span>
                        </a>
                    </div>

                </td>
            </tr>
        </table>
    </body>
</html>

А вот как они отображаются в Outlook 2013, помечены ссылкой для ссылок:

Answer 2

Я не тестировал это подробно, но мне удалось заставить что-то работать.

В ваших стилях заголовков и в 'a href = ""' добавьте следующее:

Заголовокstyle:

#outlook a { padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }

Встроенный стиль ссылки:

<a style="font-family: #; font-size: #px; text-decoration: #; border: #color #px #; color: #; padding-bottom: #px; padding-top: #px; padding-left: #px; display: inline-block; padding-right: #px; font-style: #;" href="#" target="_blank">Read more...</a>

Замените # на ваши стили, конечно, за исключением свойства display (оставьте это в!)

СноваЯ не тестировал это подробно, но для меня это сработало, так что не пропустите ничего из того, что я написал здесь:)

РЕДАКТИРОВАТЬ: Возможно, у вас нет границы в вашем дизайне, поэтому сделайте еготот же цвет, что и фон

Answer 3

Почему бы тебе просто не поставить якорь вокруг стола? Не совсем уверен, работает ли он в outlook, но это самое простое решение

<a href="...."><table>....</table></a>

Answer 4

Положите <a> в каждое из полей.Не элегантно, но это работает.

Если есть поле, которое является пустым, просто поместите туда прозрачное изображение правильной ширины и высоты.(само изображение, без изменения размера в html)

Answer 5

Лично я бы добавил призыв к действию как изображение в электронном письме и просто обернул его тегом привязки.

<a href="//"><img src="http://myimage.com/image.png" alt="" /></a>

Учитывая, что это для электронного письма, есть ли причина, по которой вы хотитесоздать призыв к действию в HTML?

ОБНОВЛЕНИЕ

Либо вы можете сделать что-то вроде этого:

http://jsfiddle.net/gv5aZ/

(Быстрая скрипка, которую я собрал для тебя)