Неработающий элемент ссылки в Outlook и Windows - PullRequest
Новая
       20

Неработающий элемент ссылки в Outlook и Windows

1 голос
/ 15 марта 2019

Я создал шаблон электронной почты со ссылкой, которая действует как кнопка.Но какой стиль я делаю, все это удаляется.Я поместил ссылку в оболочку таблицы, и проблема была решена, но проблема заключалась в том, что ссылка была кликабельной только там, где есть текст в отличие от обычного стиля ссылок.

Когда я использую код в следующем стиле 

<div class="link-wrapper">
    <a href="#" title="Title text" class="button-link" style="text-decoration: none;border-radius: 2px;background-color: #4169e1;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;">Click Here</a>
</div>

Я получаю неработающую ссылку в Outlook и электронной почте, как на скриншоте enter image description here

Но когда я использую обертку таблицы и помещаю ссылку в ячейку таблицы, проблема была решенано проблема заключалась в том, что ссылка была кликабельна только там, где текст отличается от обычного стиля ссылки. 

 <table cellspacing="0" cellpadding="0" class="my-block" id="button" align="center">
    <tr>
        <td class="button-wrapper">
            <a href="#" title="Title text" class="button-link" style="text-decoration: none;">Click Here</a>
        </td>
    </tr>
</table>

Ответы [ 2 ]

1 голос
/ 18 марта 2019

Дайте этот кусок кода. Он будет работать на всех почтовых клиентах одинаково. Если вы измените радиус границы, он будет работать только на поддерживаемых почтовых клиентах. 

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: auto;">
        <tr>
          <td style="font-family: sans-serif; font-size: 14px; vertical-align: top; background-color: #3498db; border-radius: 0px; text-align: center;" valign="top" bgcolor="#3498db" align="center"> <a href="" target="_blank" style="display: inline-block; color: #ffffff; background-color: #3498db; border: solid 1px #3498db; border-radius: 0px; box-sizing: border-box; cursor: pointer; text-decoration: none; font-size: 14px; font-weight: bold; margin: 0; padding: 12px 25px; text-transform: capitalize; border-color: #3498db;">Take action now</a> </td>
        </tr>
      </table>

Надеюсь, это то, что вы хотели.

1 голос
/ 15 марта 2019 

<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="v-text-anchor:middle;width:150px;height:40px;text-decoration: none;border-radius: 2px;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;" fillcolor="#4169e1" stroke="false">
	<w:anchorlock/>
	<v:textbox inset="0,0,0,0">
		<center style="v-text-anchor:middle;text-decoration: none;text-decoration: none;color:#ffffff;font-size: 13px;">Click Here</center>
	</v:textbox>
</v:rect>
<![endif]-->
<!--[if !mso]><!-->
<div class="link-wrapper">
    <a href="#" title="Title text" class="button-link" style="text-decoration: none;border-radius: 2px;background-color: #4169e1;text-align: center;padding: 10px 0px;border: 1px solid #4169e1;text-decoration: none;color: #fff;font-size: 13px;">Click Here</a>
</div>
<!--<![endif]-->

Добавлен VML-скрипт для поддержки outlook

...