Дополнительное пространство по сторонам изображений в Outlook при создании электронной почты в формате HTML - PullRequest
0 голосов
/ 13 декабря 2018

Я рыскал в интернете около 2-х дней и не могу найти что-нибудь о проблеме.Я сталкиваюсь с дополнительным пространством на стороне ВЛЕВО и ВПРАВО изображений на рабочем столе Outlook.

Дополнительное пространство влияет на способность моей таблицы / столбцов отображаться рядом.Если я укороту ширину любой ячейки / строки / таблицы до точной ширины этого пространства (обведено красным на изображении), они внезапно появятся рядом.Это именно то маленькое место, которое я не могу понять, как удалить.Это похоже на то, что где-то, о чем я ничего не знаю, установлено значение по умолчанию.

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

2 Как это выглядит в любом другом почтовом клиенте. 3 Как это выглядит только в outlook.

* {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-spacing: 0px;
  box-sizing: border-box;
}

@media only screen and (max-device-width: 480px) {
  table[class=responsive] {
    width: 330px !important;
  }
}

@media only screen and (max-device-width: 480px) {
  table[class=left] {
    width: 330px !important;
  }
}

@media only screen and (max-device-width: 480px) {
  table[class=right] {
    width: 330px !important;
  }
}

@media only screen and (max-device-width: 480px) {
  img {
    width: 100% !important;
  }
}

p {
  padding: 10px 10px 10px 10px;
}

a {
  color: #333333;
}

a:visited {
  color: #000000;
}
<html>

<head>
  <title></title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
  <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
  <meta content="IE=edge" http-equiv="X-UA-Compatible">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

</head>

<body style="font-family:'Trebuchet MS', Helvetica, Arial, sans-serif;">

  <!-- CENTER TABLE -->
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td align="center">

        <table width="660" border="0" cellspacing="0" cellpadding="0" class="responsive">
          <tr>
            <td bgcolor="#FFFFFF"><img src="10324612_ptgray.jpg" align="left" style="vertical-align: top; display:inline-block;"></td>
          </tr>

          <tr>
            <td bgcolor="#666666" height="50">
              <p style="text-align: center; color: #FFFFFF; font-size: 24px; line-height: 24px;"><b>THE JULY ISSUE OF <em>PHYSICS TODAY</em> IS AVAILABLE</b><br></p>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr bgcolor="#EEEEEE">
            <td>
              <table class="left" width="220" border="0" cellspacing="0" cellpadding="0" align="left">
                <tr border="0" cellspacing="0" cellpadding="0" align="left">
                  <td border="0" cellspacing="0" cellpadding="0" align="left"><img src="https://i.stack.imgur.com/BVa1S.png" width="220" border="0" cellspacing="0" cellpadding="0" align="left" style="vertical-align: top; display: block; max-width: 100%;"></td>
                </tr>
              </table>
              <table class="right" width="440" border="0" cellspacing="0" align="right">
                <tr>
                  <td>
                    <p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
                    <p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
                    <p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of &#60;6×10&#94;-6 L/sec, while other safeguards
                      prevent contamination from external influences. Options available.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr>
            <td style="border: 1px solid #CCCCCC;">
              <a href="#">
                <table class="left" width="438" border="0" cellspacing="0" align="left">
                  <tr>
                    <td valign="middle" height="287">
                      <p style="font-size: 50px; line-height: 50px; text-align: center; padding: 0px 0px 0px 0px;">View the November Issue Online</p>
                    </td>
                  </tr>
                </table>
                <table class="right" width="220" border="0" cellspacing="0" align="right">
                  <tr>
                    <td><img src="pt-cover.jpg" style="vertical-align: top; display: block;"></td>
                  </tr>
                </table>
              </a>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr bgcolor="#EEEEEE">
            <td>
              <table class="left" width="220" border="0" cellspacing="0" align="left">
                <tr>
                  <td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" height="220" style="vertical-align: top; display: block;"></td>
                </tr>
              </table>
              <table class="right" width="440" border="0" cellspacing="0" align="right">
                <tr>
                  <td>
                    <p style="color: #000000; font-size: 12px; line-height: 14px;">WHITEPAPER</p>
                    <p style="color: #C8544B; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
                    <p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of &#60;6×10&#94;-6 L/sec, while other safeguards
                      prevent contamination from external influences. Options available.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
            <td>
              <tr>
                <td>
                  <p style="border-left: 5px solid #C8544B; font-size: 24px">Restoring sight with retinal prostheses</p>
                  <p style="border-left: 5px solid #C8544B;">Author or Department</p>
                </td>
              </tr>

              <!-- SPACER -->
              <tr>
                <td height="20px">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <p style="border-left: 5px solid #C8544B; font-size: 24px">Large amplitude oscillatory shear: Simple to describe, hard to interpret</p>
                  <p style="border-left: 5px solid #C8544B;">Author or Department</p>
                </td>
              </tr>

              <!-- SPACER -->
              <tr>
                <td height="20px">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <p style="border-left: 5px solid #C8544B; font-size: 24px">Who owns a scientist's mind?</p>
                  <p style="border-left: 5px solid #C8544B;">Author or Department</p>
                </td>
              </tr>

              <!-- SPACER -->
              <tr>
                <td height="20px">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <p style="border-left: 5px solid #C8544B; font-size: 24px">Magnets separate mirror-image molecules</p>
                  <p style="border-left: 5px solid #C8544B;">Author or Department</p>
                </td>
              </tr>

              <!-- SPACER -->
              <tr>
                <td height="20px">&nbsp;</td>
              </tr>

              <tr>
                <td>
                  <p style="border-left: 5px solid #C8544B; font-size: 24px">Concerns about aging plutonium drive need for new weapon cores</p>
                  <p style="border-left: 5px solid #C8544B;">Author or Department</p>
                </td>
              </tr>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr bgcolor="#EEEEEE">
            <td>
              <table class="left" width="220" border="0" cellspacing="0" align="left">
                <tr>
                  <td><img src="https://i.stack.imgur.com/BVa1S.png" width="220" style="vertical-align: top; display: block;"></td>
                </tr>
              </table>
              <table class="right" width="440" border="0" cellspacing="0" align="right">
                <tr>
                  <td>
                    <p style="color: #000000; font-size: 12px; line-height: 14px;">Advertisement</p>
                    <p style="color: #333333; font-size: 20px; line-height: 24px;">THERE'S NO ESCAPE: LEAK-TIGHT GAS PUMPS</p>
                    <p style="color: #000000; font-size: 13px; line-height: 18px;">KNF double-diaphragm, oil-free pumps are designed for transporting and evacuating costly, high purity, rare and/or dangerous gases. The back-up safety diaphragm ensures ultra-low leak rates of &#60;6×10&#94;-6 L/sec, while other safeguards
                      prevent contamination from external influences. Options available.</p>
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
            <td>
              <p><strong>Help desk information:</strong><br><br>If you need technical assistance, please do not reply to this automated email; <a href="http://server.iad.liveperson.net/hc/84311897/?cmd=file&file=visitorWantsToChat&site=84311897&byhref=1&SESSIONVAR!operator=admin&SESSIONVAR!skill=Default%20Ticket%20Skill&imageUrl=http://www.advancedpublishing.com/images/LivePerson">click here</a>.</p>
            </td>
          </tr>

          <!-- SPACER -->
          <tr>
            <td height="20px">&nbsp;</td>
          </tr>

          <tr bgcolor="#EEEEEE" style="color: #000000; font-size: 12px; line-height: 14px; text-align: center;">
            <td>
              <p>This email has been sent to %%email%%. In case you are not able to click on the links above, please go to: <a href="#">http://physicstoday.advanced-pub.com</a></p>
              <p>Physics Today is published by the American Institute of Physics, One Physics Ellipse, College Park, MD. 20740. Send publication questions to <a href="mailto:pteditors@aip.org">pteditors@aip.org</a>. The information contained in this e-mail
                message is intended only for the personal use of the recipient(s). For Information on American Institute of Physics' Privacy Policy please click here. We appreciate your interest in our publication and encourage you to contact us with
                your comments or suggestions. Thank you!</p>
              <p>To unsubscribe, please <a href="#">click here</a>.</p>
            </td>
          </tr>


        </table>

        <!-- CENTER TABLE -->
      </td>
    </tr>
  </table>



</body>

</html>

1 Ответ

0 голосов
/ 13 декабря 2018

Согласно моему тесту и поиску, это не причина img, это может быть таблица.
Вы можете обратиться к следующему коду:

<table cellpadding="0" cellspacing="0" height="40" width="238" border="0" style="border-collapse: collapse; margin: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; max-width:238px; color: #ffffff; width:238px;height: 40px; mso-table-lspace:0pt; mso-table-rspace:0pt; background-color: #f2f2f2;">
<tbody>
    <tr>
        <td height="40" width="22" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" style="border: 0; text-decoration: none; color: #ffffff;" target="_blank">
                            <img height="40" src="ctaleftgrey.jpg" style="width: 22px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="22" />
                        </a>
                    </p>
        </td>
        <td height="40" width="180" align="left">
            <table border="0" cellpadding="0" cellspacing="0" height="40" width="180" style="border-collapse: collapse; margin: 0; border: 0; padding: 0; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; height: 40px; background-color: #ec6608; mso-table-lspace:0pt; mso-table-rspace:0pt; " valign="middle">
                <tbody>
                    <tr>
                        <td height="40" style="height: 40px; font-family: 'HelveticaNeue-CondensedBold', 'Arial Narrow', Arial, Helvetica, sans-serif; font-size: 16px; text-align: center; color: #ffffff; background-color: #ec6608; mso-line-height-rule: exactly; line-height: 16px;">
                            <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                                <a href="#" style="text-decoration:none; color:#ffffff;border: 0px;" target="_blank">Text goes here</a>
                            </p>
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td height="40" width="36" align="left">
                    <p style="mso-table-lspace:0;mso-table-rspace:0;margin:0;">
                        <a href="#" target="_blank">
                            <img height="40" src="ctarightgrey.jpg" style="width: 36px; margin: 0; border: 0; padding: 0; text-decoration: none; height: 40px;" width="36" />
                        </a>
                    </p>
        </td>
    </tr>
</tbody>
</body>

Для получения дополнительной информации, пожалуйста, перейдите по этой ссылке:

Интервал между таблицами Outlook в электронном письме в формате HTML - обычные приемы не работают

В стиле таблицы border-outlook 2010 добавляется дополнительный пробел

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...