Я знаю, что название этого поста звучит странно, но это именно то, что происходит. При тестировании шаблона электронной почты с помощью Email, Acid и Litmus я обнаружил, что Outlook.com во всех браузерах переносит стилизацию с одного элемента DOM на другой. Сначала я подумал, что это неэкранированный тег или другая распространенная проблема с электронной почтой, но это было не так. Я также подумал, что это может быть разметка кнопок, которая была извлечена из собственного поста Litmus Bullet Proof Buttons . Но после того, как я попробовал все четыре варианта, а также другие, которые я нашел в Интернете, это ничего не изменило.
Чтобы незаметно устранить эту проблему, я создал шаблон электронной почты с минимальным минимумом, необходимым для воспроизведения происходящего.
Шаблон электронной почты: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Я отправил тестовое письмо от Litmus на учетную запись Outlook.com, к которой у меня есть доступ, и извлек реальную разметку, которую он генерирует. Вот оно.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
Как вы можете видеть, он берет стиль из TD> A и применяет его к следующему TD. В оригинальном шаблоне электронной почты, который у меня был, это происходило несколько раз. Смотрите примеры ниже
Оригинальный шаблон: каждая синяя часть разбита
Шаблон тестирования: Outlook.com в нескольких браузерах
Шаблон тестирования: Примеры других почтовых клиентов
Это больше похоже на ошибку Outlooks.com, чем на Outlook.com. Кто-нибудь может объяснить, что происходит, и предложить пути решения этой проблемы?