Я знаю, что проблемы с внешним видом рендеринга вещей здесь очень популярны, но, по крайней мере, я столкнулся с довольно странной для меня проблемой. Я пробовал все решения на inte rnet, но у меня ничего не работало. Особенность проблемы, с которой я сталкиваюсь, заключается в том, что она появляется, когда я отвечаю на электронное письмо, а не при его получении.
Когда я получаю электронное письмо, оно выглядит так (я удалил его содержимое):
Но когда Я отвечаю на то же электронное письмо, между разделами (таблицами) добавлены странные пробелы:
Вот html, которое я использую:
<html>
<head>
<!-- Avoid image scalling for Outlook 2013 120dpi -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<!-- This part depend on the router solution and the language used in email -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><!-- Compatibility with Windows Phones -->
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE"/><!-- Viewport initialisation -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Google fonts css link -->
<link href="https://fonts.googleapis.com/css?family=Lato:normal|Lato:700|Lato:900" rel="stylesheet"/><!-- Email title should be email subject -->
<title>ENGIE Particuliers</title><!-- Here comes all the responsive part -->
<style type="text/css">
/* RESET CSS */
#outlook a {
padding: 0
}
span.MsoHyperlink {
mso-style-priority: 1;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 1;
color: inherit
}
body {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
padding: 0;
color: #000000;
margin: 0 auto
}
td {
line-height: 100%
}
div[style*="margin: 16px 0"] {
margin: 0 !important
}
.ExternalClass {
width: 100%;
display: block !important
}
.ExternalClass,
.ExternalClass *,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic
}
a img {
border: none
}
u+* img+div {
display: none
}
table td {
border-collapse: collapse;
mso-line-height-rule: exactly
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt
}
a {
color: inherit;
text-decoration: none;
mso-line-height-rule: exactly
}
.appleLinks,
.appleLinksWhite {
text-decoration: none !important
}
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important
}
sup {
font-size: 0.8em;
vertical-align: text-top;
line-height: 1;
height: 0;
mso-text-raise: 24%
}
/* EO - RESET CSS */
*:not(#outlook).lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
*:not(#outlook).lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
*:not(#outlook).lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
/* Responsive breakpoint for tablet */
@media screen and (min-width: 451px) and (max-width: 540px),
screen and (min-device-width: 451px) and (max-device-width: 540px) {
.t_w100p {
width: 100% !important
}
.t_w25p {
width: 25% !important
}
.t_w16p {
width: 16% !important
}
.t_pl50px {
padding-left: 50px !important
}
.t_w84p {
width: 84% !important
}
.t_w0p {
width: 0% !important
}
.t_pr50px {
padding-right: 50px !important
}
.t_pt10px {
padding-top: 10px !important
}
.t_w50p {
width: 50% !important
}
.t_fwbold {
font-weight: bold !important
}
.t_fsnormal {
font-style: normal !important
}
.t_w47d5p {
width: 47.5% !important
}
.t_w88p {
width: 88% !important
}
.t_bgcfbfbfb {
background-color: #fbfbfb !important
}
.t_pl20px {
padding-left: 20px !important
}
.t_w5p {
width: 5% !important
}
.t_pr20px {
padding-right: 20px !important
}
.t_fz12px {
font-size: 12px !important
}
.t_w90p {
width: 90% !important
}
.t_w32p {
width: 32% !important
}
.t_w2p {
width: 2% !important
}
.t_w30p {
width: 30% !important
}
.t_w33d33p {
width: 33.33% !important
}
.t_w80p {
width: 80% !important
}
.t_w33d34p {
width: 33.34% !important
}
.t_v {
display: block !important;
font-size: inherit !important;
max-height: none !important;
max-width: none !important;
overflow: visible !important;
}
.t_dnone {
display: none !important;
}
.t_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
.t_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
.t_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
}
/* Responsive breakpoint for mobile */
@media screen and (max-width: 450px),
screen and (max-device-width: 450px) {
.m_w100p {
width: 100% !important
}
.m_w40p {
width: 40% !important
}
.m_w18p {
width: 18% !important
}
.m_w85p {
width: 85% !important
}
.m_pl20px {
padding-left: 20px !important
}
.m_w82p {
width: 82% !important
}
.m_pt8px {
padding-top: 8px !important
}
.m_pr20px {
padding-right: 20px !important
}
.m_w0p {
width: 0% !important
}
.m_taleft {
text-align: left !important
}
.m_pt10px {
padding-top: 10px !important
}
.m_pb20px {
padding-bottom: 20px !important
}
.m_w86p {
width: 86% !important
}
.m_pt0px {
padding-top: 0px !important
}
.m_fwbold {
font-weight: bold !important
}
.m_fsnormal {
font-style: normal !important
}
.m_w87p {
width: 87% !important
}
.m_w75p {
width: 75% !important
}
.m_pt20px {
padding-top: 20px !important
}
.m_h20px {
height: 20px !important
}
.m_fz20px {
font-size: 20px !important
}
.m_lh20px {
line-height: 20px !important
}
.m_pt40px {
padding-top: 40px !important
}
.m_w80p {
width: 80% !important
}
.m_bdt1pxsolid333333 {
border-top: 1px solid #333333 !important
}
.m_bdr1pxsolid333333 {
border-right: 1px solid #333333 !important
}
.m_bdb1pxsolid333333 {
border-bottom: 1px solid #333333 !important
}
.m_bdl1pxsolid333333 {
border-left: 1px solid #333333 !important
}
.m_lh14px {
line-height: 14px !important
}
.m_w60p {
width: 60% !important
}
.m_w33d33p {
width: 33.33% !important
}
.m_w33d34p {
width: 33.34% !important
}
.m_w90p {
width: 90% !important
}
.m_v {
display: block !important;
font-size: inherit !important;
max-height: none !important;
max-width: none !important;
overflow: visible !important;
}
.m_dnone {
display: none !important;
}
.m_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
.m_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
.m_lato {
font-family: 'Lato', Arial, Helvetica, sans-serif !important
}
}
</style>
</head>
<body class="fr-no-selection" style="background-color: rgb(242, 242, 242);">
<table border="0" cellpadding="0" cellspacing="0" style="width:100%;" width="100%">
<!-- Force Gmail app to render desktop version of email -->
<tbody>
<tr class="t_dnone m_dnone">
<td height="1" style="height:1px;max-height:1px;font-size:1px;line-height:1px;"><span style="display:block;width:540px;min-width:540px;"> </span></td>
</tr><!-- Email content -->
<tr>
<td style="background-color:#f2f2f2;">
<!-- SECTION / LOGO SEUL -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;background-color:#ffffff;width:540px;" width="540">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w25p m_w40p" style="margin:auto;width:113px;" width="113">
<tbody>
<tr>
<td style="padding-top:30px;padding-bottom:30px;text-align:center;"><a href="https://particuliers.engie.fr/" style="color:#000000;outline:none;border:none;"><img alt="" class="t_w100p m_w100p" src="" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 13px; border-style: none; outline-style: none; text-decoration: none;" width="113"/></a></td>
</tr>
</tbody>
</table><!-- EO - image - a7c44c8e-f3c6-46de-bfb1-c098c1e1cbbb -->
</td>
</tr>
</tbody>
</table><!-- EO - SECTION / LOGO SEUL -->
<!-- SECTION / Adresse client -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:540px;" width="540">
<tbody>
<tr>
<td>
<div style="border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;display:block;overflow:hidden;mso-border-alt:none #ffffff 0;background-color:#ffffff;">
<!--[if gte mso 9]><table cellpadding="0" cellspacing="0" border="0" width="540" style="background-color:#ffffff;border-collapse:collapse"><tr><td style="border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2;vertical-align:top;border-collapse:collapse"><![endif]-->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;clear:both;width:540px;" width="540">
<tbody>
<tr>
<td height="10" style="font-size:0px; line-height:0px; border-collapse: collapse;"> </td>
</tr>
</tbody>
</table><!-- EO - spacer - e2192ab1-38de-446e-882a-ee9d33d7c09a -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:540px;" width="540">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="t_w16p m_w18p" style="width:108px;" width="108">
<tbody>
<tr>
<td>
<table align="right" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w85p" style="width:108px;" width="108">
<tbody>
<tr>
<td valign="bottom" style="font-size:0px; line-height:0px; border-collapse: collapse;padding-left:80px;text-align:center;"><img alt="Icon" class="t_w100p m_w100p" src="" border="0" align="top" style="border-style: none; display: block;" width="28"/></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]> </td><td style="vertical-align:top;border-collapse:collapse"><![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="t_w84p m_w82p" style="width:432px;" width="432">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="width:324px;" width="324">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:324px;" width="324">
<tbody>
<tr>
<td class="m_pt8px m_pr20px" style="font-family:Arial,Helvetica,sans-serif;color:#31546d;text-align:left;font-size:14px;padding-top:10px;padding-bottom:10px;padding-left:15px;vertical-align:middle;">TESTESTESTESTEST</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;clear:both;width:540px;" width="540">
<tbody>
<tr>
<td height="10" style="font-size:0px; line-height:0px; border-collapse: collapse;"> </td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]></td></tr></table><![endif]-->
</div>
</td>
</tr>
</tbody>
</table>
<!-- SECTION / Edito -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;background-color:#ffffff;width:540px;" width="540">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:540px;" width="540">
<tbody>
<tr>
<td>
<table align="left" border="0" cellpadding="0" cellspacing="0" class="t_dnone t_w0p m_dnone m_w0p" style="width:108px;" width="108">
<tbody>
<tr>
<td><span> </span></td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]> </td><td style="vertical-align:top;border-collapse:collapse"><![endif]-->
<table align="left" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="width:324px;" width="324">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:324px;" width="324">
<tbody>
<tr>
<td class="m_taleft lato" style="font-family:Arial,Helvetica,sans-serif;font-weight:700;color:#00bcfd;text-align:center;font-size:20px;padding-top:30px;padding-right:20px;padding-bottom:10px;padding-left:20px;vertical-align:middle;letter-spacing:1px;line-height:28px;">TESTESTESTES</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if gte mso 9]> </td><td style="vertical-align:top;border-collapse:collapse"><![endif]-->
<table align="right" border="0" cellpadding="0" cellspacing="0" class="t_dnone t_w0p m_dnone m_w0p" style="width:108px;" width="108">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:108px;" width="108">
<tbody>
<tr>
<td style="text-align:center;"><img src="" alt="" width="108" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: rgb(0, 0, 0); line-height: 13px; border: none;" class="t_w100p m_w100p"/></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- EO - WRAPPER / ffa6b04b-21b3-4b3b-99bf-f90d504d979a -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;width:540px;" width="540">
<tbody>
<tr>
<td class="t_pt10px t_pr50px t_pl50px m_pt10px m_pr20px m_pb20px m_pl20px" style="font-family:Arial,Helvetica,sans-serif;color:#31546d;text-align:left;font-size:14px;padding-top:2px;padding-right:70px;padding-bottom:10px;padding-left:70px;vertical-align:middle;line-height:22px;border-collapse:collapse;mso-line-height-rule:exactly;">
<div style="text-align: right;">TESTETSTETSTETSTETSTETSTETST<br />
</div>
TESTESTESTESTESTESTEST </br></br>TESTESTETSTESTES</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- SECTION / Signature -->
<table align="center" border="0" cellpadding="0" cellspacing="0" class="t_w100p m_w100p" style="margin:auto;background-color:#ffffff;width:540px;" width="540">
</td>
</tr>
</tbody>
</table>
</table>
</body>
</html>
Есть ли у вас идеи, как этого избежать?