Ответ 1
Outlook 2007/2010 добавляет 15px верхнее/нижнее и 10px левое/правое дополнение к всем html-сообщениям. Вы не можете избавиться от него.
Вот трюк для фальсификации полных фонов: http://www.campaignmonitor.com/forums/viewtopic.php?pid=17048
Богатые HTML-письма в Outlook 2007 и 2010... как вы удаляете верхнюю границу?
У меня богатый HTML-адрес электронной почты. Мне было интересно, как в Outlook 2010 и 2007 вы получаете таблицу в макете, чтобы сместиться с краем браузера?
Посмотрите на этот рис:
Розовый цвет фона тега тела, а серый - bg таблицы. У них как всего 0 (margin, paddting ect). Но есть еще какое-то место. Розовый не должен быть виден.
Кто-нибудь знает, как избавиться от этого пространства на теле?
Также есть CSS для начала отправки по электронной почте:
<html>
<head>
<style type="text/css">
html, body{ width:100%; }
body{ background-color:#ff00ff; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body topmargin="0" style="margin:0; padding:0; width:100%; background-color:#ff00ff;" >
<table topmargin="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse;border-spacing: 0;border: 0; margin:0; padding:0; background-color:#eee;" >
Ура!
Ответы
Ответ 2
Outlook использует разбитый Microsoft Word механизм HTML и не основан на каком-либо разумном сходстве с браузером.
Если у вас есть Word, вы можете хотя бы открыть свой адрес электронной почты в виде html и посмотреть, как он отображает его, не проходя весь почтовый цикл.
Outlook действительно в проклятии любого маркетолога электронной почты. Это абсолютная куча дерьма и не поддерживает даже самые основные ожидания CSS.
Мне пришлось бы иметь много откровенных и разочаровывающих обсуждений с графическими дизайнерами по поводу ограничений электронной почты как платформы из-за Outlook. Microsoft серьезно сделала шаг назад в использовании механизма Word для Outlook.
Ответ 3
С чистым CSS (я не уверен, что создатели IE любят читать это), вы можете использовать !important, чтобы заставить поле и дополнение <table> и <body> быть 0px:
html, body
{
margin: 0px !important;
padding: 0px !important;
}
table
{
margin: 0px !important;
}
Возможно, это сработает, но, возможно, нет. Я не уверен, как Outlook обрабатывает CSS...
Ответ 4
Указать, что <body style="padding:0px; margin:0px;"> не работает.
Я считаю, что с Outlook 2007/2010, если вы применили padding-top к столбцу, но не к другим столбцам в той же строке, Outlook по какой-то причине применит это дополнение ко всем столбцам. Можете ли вы вставить больше кода электронной почты, чтобы мы могли посмотреть, что это не что-то другое, вызывающее проблему.
Ответ 5
Попробуйте использовать margintop="0" marginleft="0" marginright="0" в теге <body> (обновленный до полного примера):
<html>
<head>
<title>Title Tag</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body margintop="0" marginleft="0" marginright="0" bgcolor="#ff00ff">
<table width="100%" cellmargin="0" cellspacing="0" border="0"><tr><td width="100%">
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td width="600">
</td></tr></table>
</td></tr></table>
</body>
</html>
Вам нужно будет установить ширину 600 на любую ширину вашей электронной почты.
Существуют кросс-электронные клиентские ошибки с тегами тела и значениями заполнения/поля в CSS.
NB - это необходимо и работает только на теге тела.
Ответ 6
Поскольку прогноз не поддерживает маржу - ссылка. Моя работа по этому вопросу была следующей. Надеюсь, это поможет кому-то.
<table cellpadding="0" cellspacing="0" border="0" style="width:100% !important; margin:0; padding:0; background-color:#ffffff; line-height: 100% !important; border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
<!-- SECTION:TOP -->
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_03.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_04.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_05.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
<tr style="margin:0; padding:0; border:0;">
<td>
<img src="/assets/images/10049-2013-Email_06.gif" alt="" height="104" width="145" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_07.gif" alt="" height="104" width="261" border="0" style="display:block;" />
</td>
<td>
<img src="/assets/images/10049-2013-Email_08.gif" alt="" height="104" width="144" border="0"style="display:block;" />
</td>
</tr>
Ответ 7
Я знаю, что это немного поздно, но я столкнулся с этим сообщением и подумал, что вы также сможете протестировать этот метод.
"Фиксация принудительного заполнения тела в Outlook 2007, 2010 и 2013
Тестирование html-письма в последнее время с высоким процентом получателей вероятно, будут пользователями Microsoft Outlook. Я столкнулся с ошибкой, где ее невозможно перезаписать принудительное заполнение кузова в версиях outlook (которые используют MS Words rendering engine 2007, 2010, 2013).
Это нарушало дизайн и вызывало нежелательные пробелы на левый край электронной почты. Оскорбительные версии поддержки Outlook маржа (включая отрицательную маржу), но поддерживает только встроенные стили. Так исправление/взлома - обернуть всю электронную почту в таблицу обертки и применить отрицательная маржа только для проблемных почтовых клиентов - с помощью html 'if как показано ниже".
<!--[if !gte mso 9]><!---->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<!--<![endif]-->
<!--[if gte mso 9]>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:-10px;">
<tr>
<td>
<![endif]-->
<!-- YOUR CONTENT HERE -->
</td>
</tr>
</table>