Apple Mail E-mail Подпись - Столкновение / Перекрытие Столов друг на друга?

Время от времени я получаю уведомления от клиентов о том, что подпись HTML для электронной почты, которую я для них создал, сваливается на себя в стандартном приложении Apple Mail на iOS.

Это имеет место, как правило, только в том случае, если я реализую несколько таблиц друг над другом, что необходимо для конструкций, подобных приведенной ниже, для обеспечения того, чтобы одна из таблиц имела полный фоновый цвет, без белых линий между ячейками таблицы.

В любом случае, кажется, что таблицы рушатся друг на друга, но я не могу воспроизвести проблему на моем iPad 3 под управлением iOS 9.3.5, который является единственным устройством Mac, которым я владею и могу тестировать установку и отправку с (я использую Электронная почта на Acid для проверки получения на нескольких устройствах и платформах).

Ниже приведен пример проблемы и основной код... Любая помощь будет принята с благодарностью... Спасибо!

Как это должно выглядеть по сравнению с тем, как это иногда выглядит из Apple Mail на iOS:

Как это должно выглядеть против того, как это иногда выглядит из Apple Mail на iOS

И вот код для этого примера:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
 <table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
  <tbody>
    <tr>
      <td width="130" rowspan="4" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
    </tr>
    <tr>
      <td width="295" style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;" width="50"></td>
    </tr>
    <tr>
      <td width="295" valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span>
   </td>
    </tr>
    <tr>
      <td width="295" valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;">
  <div nowrap style="white-space: nowrap;">
  <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> <a href="tel:345-324-3333" style="border: none; text-decoration: none; color: #3a3a3c; font-weight: bold;">345 324 3333</a>&nbsp;&nbsp;<span style="color: #00aeef; font-weight: bold;">&bull;</span>&nbsp;&nbsp;<a href="mailto:Tony@AshmoreAlexander.com" style="border: none; text-decoration: none; color: #00aeef;">Tony@AshmoreAlexander.com</a><br>
  <span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY&zwnj;1-12&zwnj;07, Cayman Islands</span><br>
  <a href="http://www.ashmorealexander.com/" style="border: none; text-decoration: none; color: #00aeef; font-weight: bold;">www.AshmoreAlexander.com</a>
  </div></td>
    </tr>
    <tr>
      <td width="130" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;">&nbsp;</td>
      <td width="295" height="10" style="font-size: 10px; mso-line-height-rule: exactly; line-height: 10px;">&nbsp;</td>
   </tr>
 </tbody>
</table>
<table bgcolor="#00aeef" width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
  <tbody>
 <tr>
      <td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;">&nbsp;</td>
      <td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;">&nbsp;</td>
    </tr>
    <tr>
      <td width="250" height="46" bgcolor="#00aeef" valign="middle" rowspan="2" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/" style="border: none; text-decoration: none;" target="_blank"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></a></td>
      <td width="175" height="23" bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/cayman-islands-real-estate-for-sale/"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></a>
   </td>
    </tr>
    <tr>
      <td width="210" height="23" bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/contact-us/"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></a></td>
    </tr>
    <tr>
      <td width="425" colspan="2" height="5" bgcolor="#3a3a3c" style="background-color: #3a3a3c; font-size: 5px; line-height: 5px;">&nbsp;</td>
    </tr>
</tbody>
</table>
<table width="425" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
  <tbody>
    <tr>
   <td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;">
   <a href="https://business.facebook.com/CaymanIslandsRealEstateAshmoreAlexander/?business_id=1389844441340315" style="border: none; text-decoration: none;" target="_blank"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://www.instagram.com/ashmorealexander/" style="border: none; text-decoration: none;" target="_blank"><img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://www.linkedin.com/in/tonyashmore/" style="border: none; text-decoration: none;" target="_blank"><img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://twitter.com/TheTonyAshmore" style="border: none; text-decoration: none;" target="_blank"><img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></a></td>
   <td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
      </tr>
  </tbody>
 </table>
 <table width="auto" border="0" cellspacing="0" cellpadding="0">
  <tbody>
    <tr>
      <td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

Источник

1 ответ

Как я уже говорил в моем предыдущем комментарии, вы используете высоты для td, rowspan и colspan. Старайтесь держаться от них подальше. Я перекодировал кусочки вашего HTML и добавил еще несколько вещей.

<table width="425" border="0" cellspacing="0" cellpadding="0">
   <tbody>
     <tr>
       <td><table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
         <tbody>
           <tr>
             <td width="120" valign="bottom" style="padding: 0px 10px 0px 0px; vertical-align: bottom;"><img alt="Headshot" height="120" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Headshot-v2.png" style="display: inline-block;" width="120"></td>
             <td width="295" valign="bottom"><table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
               <tbody>
                 <tr>
                   <td style="padding: 5px 0px 1px 0px;"><img alt="Signature" height="55" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Tony-Ashmore-Signature-v1.png" style="display: inline-block;"></td>
                    </tr>
                 <tr>
                   <td valign="middle" style="padding: 0px 0px 3px 0px; border-bottom: #00aeef 1px dotted; font-family: Arial, sans-serif; font-size: 14px; line-height: 15px; color: #3a3a3c;"><span style="font-weight: bold; font-size: 11pt;">Tony Ashmore</span> <span style="font-weight: normal; font-size: 8pt; color: #00aeef;">REAL ESTATE PROFESSIONAL</span></td>
                    </tr>
                 <tr>
                   <td valign="bottom" style="padding: 3px 0px 0px 0px; font-family: Arial, sans-serif; font-size: 8pt; color: #3a3a3c; line-height: 15px; vertical-align: bottom;"><div nowrap style="white-space: nowrap;"> <span style="color: #00aeef; font-weight: bold; font-size: 6pt;">M</span> <a href="tel:345-324-3333" style="border: none; text-decoration: none; color: #3a3a3c; font-weight: bold;">345 324 3333</a>&nbsp;&nbsp;<span style="color: #00aeef; font-weight: bold;">&bull;</span>&nbsp;&nbsp;<a href="mailto:Tony@AshmoreAlexander.com" style="border: none; text-decoration: none; color: #00aeef;">Tony@AshmoreAlexander.com</a><br>
                     <span style="color: #3a3a3c;">P.O. Box 31673, Grand Cayman KY&zwnj;1-12&zwnj;07, Cayman Islands</span><br>
                     <a href="http://www.ashmorealexander.com/" style="border: none; text-decoration: none; color: #00aeef; font-weight: bold;">www.AshmoreAlexander.com</a></div></td>
                    </tr>
                  </tbody>
               </table></td>
              </tr>
            </tbody>
         </table>
            <table bgcolor="#00aeef" width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse; background-color: #00aeef;">
              <tbody>
                <tr>
                  <td bgcolor="#ffffff" width="200" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;">&nbsp;</td>
                  <td bgcolor="#ffffff" width="225" height="1" style="border-top: #3a3a3c 1px solid; font-size: 1px; mso-line-height-rule: exactly; line-height: 1px; background-color: #ffffff;">&nbsp;</td>
                </tr>
                <tr>
                  <td width="250" bgcolor="#00aeef" valign="middle" style="padding: 8px 0px 5px 10px; vertical-align: middle; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/" style="border: none; text-decoration: none;" target="_blank"><img alt="Logo" height="50" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Logo-White-v2.png" style="text-decoration: none; border: 0;" width="195"></a></td>
                  <td bgcolor="#00aeef" align="left" valign="top" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#00aeef" style="border-collapse: collapse; background-color: #00aeef;">
                    <tbody>
                      <tr>
                        <td bgcolor="#00aeef" align="right" valign="bottom" style="padding: 8px 10px 1px 0px; vertical-align: bottom; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/cayman-islands-real-estate-for-sale/"><img alt="Properties For Sale" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-For-Sale-Button-v2.png" style="text-decoration: none; border: 0;" width="165"></a></td>
                      </tr>
                      <tr>
                        <td bgcolor="#00aeef" align="right" valign="top" style="padding: 2px 10px 5px 0px; vertical-align: top; background-color: #00aeef;"><a href="http://www.ashmorealexander.com/contact-us/"><img alt="What's Your Home Worth?" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Worth-Button-v1.png" style="text-decoration: none; border: 0;" width="165"></a></td>
                      </tr>
                    </tbody>
                  </table></td>
                </tr>
              </tbody>
            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="0" style="border-collapse: collapse;">
              <tbody>
                <tr>
                  <td width="125" valign="top" style="padding: 10px 0px 10px 0px; vertical-align: top;"><a href="https://business.facebook.com/CaymanIslandsRealEstateAshmoreAlexander/?business_id=1389844441340315" style="border: none; text-decoration: none;" target="_blank"><img alt="Facebook" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Facebook.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://www.instagram.com/ashmorealexander/" style="border: none; text-decoration: none;" target="_blank"><img alt="Instagram" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Instagram.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://www.linkedin.com/in/tonyashmore/" style="border: none; text-decoration: none;" target="_blank"><img alt="Linkedin" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Linkedin.png" style="text-decoration: none; border: 0;" width="22"></a>&nbsp;<a href="https://twitter.com/TheTonyAshmore" style="border: none; text-decoration: none;" target="_blank"><img alt="Twitter" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Twitter.png" style="text-decoration: none; border: 0;" width="22"></a></td>
                  <td width="300" valign="top" align="right" style="padding: 10px 0px 10px 0px; vertical-align: top;"><img alt="CIREBA MLS Regal Realty" height="22" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-cireba_mls_regal-realty.png" style="text-decoration: none; border: 0;" width="267"></td>
                </tr>
              </tbody>
            </table>
            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tbody>
                <tr>
                  <td style="padding: 20px 0px 0px 0px;"><img alt="Think before you print" height="12" src="https://s3.us-east-2.amazonaws.com/makalla/Ashmore+Alexander/AA-Think-v1.png" style="text-decoration: none; border: 0;" width="128"></td>
                </tr>
              </tbody>
          </table></td>
        </tr>
      </tbody>
</table>

Надеюсь, что это работает для вас.

Источник
Другие вопросы по тегам