Apple Mail Email Signature - Столкновения / Перекрытия Таблиц друг на друга? - PullRequest
Новая
       48

Apple Mail Email Signature - Столкновения / Перекрытия Таблиц друг на друга?

0 голосов
/ 14 ноября 2018

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

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

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

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

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

How it should look vs how it sometimes looks from Apple Mail on 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 Ответ

0 голосов
/ 17 ноября 2018

Как я уже сказал в моем комментарии выше, вы используете высоты для 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>

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

...