Проблема с HTML электронной почтой во всех версиях Outlook - PullRequest
0 голосов
/ 12 марта 2020

У меня есть электронная почта для клиента, над которым я работаю. Он прекрасно работает во всех программах, кроме Microsoft Outlook. Прямо сейчас синий стол вверху выходит за пределы контейнера. Единственное другое решение, которое у меня есть, - сделать этот текст изображением, но я бы предпочел, чтобы это было невозможно. Кто-нибудь знает, как это исправить?

Снимок экрана: проблема с электронной почтой

Вот часть кода, который я использую. Это отзывчиво, но я включил только код для рабочего стола:

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
							<tr>
								<td class="no-mobile" style="font-family: Helvetica, Arial, sans-serif;color:black; line-height:15px; padding: 4px;font-size: 11px;text-align:center;">
									
									<p style="margin:5px 0px 20px 10px;">
										Having trouble reading this? View on the web at:<br> <a href="https://www.migraine.com/weekly/2020-Ubrelvy/ubr-exc-M200319-searching.html " style="color:#0020ff;">https://www.migraine.com/weekly/2020-Ubrelvy/ubr-exc-M200319-searching.html </a><br> The following is a sponsored message. Health Union LLC does not endorse any specific product, service or treatment.
									</p>
								</td>
							 </tr>
						</table>
						 <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
							<tr>
								<td class="no-mobile" style="font-family: Helvetica, Arial, sans-serif;color:#427bba; line-height:120%; padding: 4px;font-size: 12px;">
									<p style="margin:5px 0px 10px 10px;">
										<a href="https://media.allergan.com/products/Ubrelvy_pi.pdf?aimlink=6d15a2d396d36679ff9e8c4355c27da4&aimtoken=NTk4ODU0NS0zYTc3YmI1ZQ#page=14" style="color:#427bba;text-decoration:none;">Patient Information</a>
									</p>
								</td>
								<td class="no-mobile" style="font-family: Helvetica, Arial, sans-serif;color:black; line-height:120%; padding: 4px;font-size: 12px;color:#427bba;">
									<p style="margin:5px 200px 10px 0px;">
										<a href="https://www.ubrelvy.com/important-safety-information?cid=EM-Ubr_Excedrin_OTC_HU-Header_ISI" style="color:#427bba;text-decoration:none;">Important Safety Information</a>
									</p>
								</td>
								<td class="no-mobile" style="font-family: Helvetica, Arial, sans-serif;color:black; line-height:120%; padding: 4px;font-size: 12px;text-align:left;color:#427bba;">
									<p style="margin:5px 10px 10px 0px;">
										<a href="https://www.migraine.com/weekly/2020-Ubrelvy/ubr-exc-M200319-searching.html" style="color:#427bba;text-decoration:none;">View in browser</a>
									</p>
								</td>
							 </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="`0" bgcolor="#38bdd1"  >
							<tr>
								<td valign="top" class="no-mobile" style="line-height:12px; font-size:10px;color:black;font-family: Arial, sans-serif;">
								<p style="margin: 20px 0px 20px 30px;">
									UBRELVY™ is a prescription medicine used for the acute treatment of migraine attacks with or without aura in adults.<br> UBRELVY is not used to prevent migraine headaches.	
									</p>
								</td>	
							</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
							<tr>
								<td valign="top" class="no-mobile" style="font-size:0px; line-height:27px; vertical-align: top;font-size:22px;color:#676767;font-family: Arial, sans-serif;">
									<p style="margin: 0px 0px 0px 0px;">
									  <a href="https://www.ubrelvy.com/home?cid=EM-Ubr_Excedrin_OTC_HU-Ubr_Logo">
										<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-hero-1.png" width="100%" alt="UBRELVY™ is a prescription medicine used for the acute treatment of migraine attacks with or without aura in adults. UBRELVY is not used to prevent migraine headaches. Searching For Relief When A Migraine Strikes"/>
										</a>
									</p>
								</td>	
							</tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="10" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								   <p style="text-align:left;margin:10px 0px 10px 30px;font-size:22px;font-weight:bold;line-height:29px;color:#00a174">
									INTRODUCING UBRELVY
								  </p> 
								   <p style="text-align:left;margin:10px 0px 10px 30px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									   While over-the-counter Excedrin<sup style="line-height:0px;font-size:10px;">&reg;</sup> Migraine is temporarily unavailable, talk to your healthcare provider to see if prescription UBRELVY is right for you. It’s a new medicine that treats migraine pain and symptoms once they start and has a safety profile that allows you to take it whenever, wherever you need it. 
								  </p> 
								  <p style="text-align:left;margin:20px 0px 20px 30px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									  <a href="https://www.ubrelvy.com/home?cid=EM-Ubr_Excedrin_OTC_HU-Visit_Ubr_Button">
										  <img src="https://www.migraine.com/weekly/2020-Ubrelvy/visit-cta.png" width="227px" alt="Visit Ubrelvy.com"/>
									  </a>
								  </p> 
								  <p style="text-align:left;margin:30px 0px 20px 30px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-on-the-go-treatment.png" width="100%" alt="A New On-The-Go-Treatment"/>
								  </p> 
								  <p style="text-align:left;margin:30px 0px 5px 30px;font-size:22px;font-weight:bold;line-height:29px;color:#00a174">
									YOU MAY PAY AS LITTLE AS $1 PER PILL*
								  </p> 
								  <p style="text-align:left;margin:0px 0px 10px 30px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									See if you’re eligible for exclusive savings and learn more about UBRELVY now!
								  </p>
								   <p style="text-align:left;margin:20px 0px 20px 30px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									<a href="https://www.ubrelvy.com/savings?cid=EM-Ubr_Excedrin_OTC_HU-Discover_Savings_Button">  
									  <img src="https://www.migraine.com/weekly/2020-Ubrelvy/discover-cta.png" width="227px" alt="Discover Savings"/>
									 </a>
								  </p> 
								  <p style="text-align:left;margin:10px 0px 10px 30px;font-size:12px;font-weight:normal;line-height:15px;color:black;">
									*Terms and Conditions apply. This offer is valid only for commercially insured patients. Offer not valid for patients enrolled in Medicare, Medicaid, or other federal or state healthcare programs. <a href="https://www.ubrelvy.com/savings-terms?cid=EM-Ubr_Excedrin_OTC_HU-Savings_Program_Terms" style="text-decoration:none;color:#394fd3">Please review full Program Terms, Conditions, and Eligibility Criteria.</a> 
								  </p>
								   <p style="text-align:left;margin:30px 0px 5px 30px;font-size:22px;font-weight:bold;line-height:29px;color:#00a174">
									DISCOVER UBRELVY
								  </p>
								  <p style="text-align:left;margin:0px 0px 0px 30px;font-size:13px;font-weight:normal;line-height:18px;color:black;">
									The efficacy of UBRELVY was proven in 2 clinical studies with over 2,000 participants.
								  </p>
								  <p style="text-align:left;margin:0px 0px 10px 30px;font-size:13px;font-weight:normal;line-height:18px;color:black;">
									These studies evaluated the following outcomes at 2 hours after taking 1 dose of UBRELVY:
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								  <p style="margin:10px 0px 0px 50px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-icon-pain-freedom.png" width="120" alt="PAIN FREEDOM(ZERO PAIN)"/>
								  </p> 
							  </td>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								  <p style="margin:10px 0px 20px 20px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-icon-absence.png" width="220" alt="ABSENCE OF MOST BOTHERSOME MIGRAINE SYMPTOMS (LIGHT SENSITIVITY, SOUND SENSITIVITY, OR NAUSEA)"/>
								  </p> 
							  </td>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="margin:10px 0px 20px 0px;font-size:14px;font-weight:normal;line-height:18px;color:black;">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-icon-pain-relief.png" width="120" alt="PAIN RELIEF"/>
								  </p> 
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="text-align:left;margin:0px 0px 30px 30px;font-size:13px;font-weight:bold;line-height:16px;color:black;">
									The majority of patients achieved pain relief (reduction in pain) and 1 in 5 experienced total pain freedom. Many also reported absence of their most bothersome symptom.
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="text-align:left;margin:0px 0px 20px 30px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;">
									Important Safety Information
								  </p>
								  <p style="text-align:left;margin:0px 0px 0px 30px;font-size:12px;font-weight:bold;line-height:16px;color:black;">
									Who should not take UBRELVY&#8482;(ubrogepant)?
								  </p>
								  <p style="text-align:left;margin:0px 0px 20px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									Do not take UBRELVY if you are taking medicines known as strong CYP3A4 inhibitors, such as ketoconazole, clarithromycin, itraconazole.
								  </p>
								  <p style="text-align:left;margin:0px 0px 0px 30px;font-size:12px;font-weight:bold;line-height:16px;color:black;">
									What should I tell my healthcare provider before taking UBRELVY?
								  </p>
								  <p style="text-align:left;margin:0px 0px 0px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									Tell your healthcare provider about all your medical conditions, including if you:
								  </p>
								   <ul style="padding: 0; margin: 0px 0px 0px 38px; line-height:20px;font-size:12px;">
									  <li style="margin: 0px 0px 0px 10px;color:black;"> Have liver problems</li>
									 <li style="margin: 0px 0px 0px 10px;color:black;">Have kidney problems</li>
                                     <li style="margin: 0px 0px 0px 10px;color:black;">Are pregnant or plan to become pregnant </li>
									  <li style="margin: 0px 0px 0px 10px;color:black;">Are breastfeeding or plan to breastfeed </li>
                                    </ul>
								  <p style="text-align:left;margin:20px 0px 20px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									<strong>Tell your healthcare provider about all the medicines you take,</strong> including prescription and over-the-counter medicines, vitamins, and herbal supplements. Your healthcare provider can tell you if it is safe to take UBRELVY with other medicines.
								  </p>
								   <p style="text-align:left;margin:20px 0px 0px 30px;font-size:12px;font-weight:bold;line-height:16px;color:black;">
									What are the most common side effects of UBRELVY?
								  </p>
								  <p style="text-align:left;margin:0px 0px 20px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									The most common side effects are nausea (4%) and sleepiness (3%). These are not all of the possible side effects of UBRELVY. 
								  </p>
								  <p style="text-align:left;margin:20px 0px 0px 30px;font-size:12px;font-weight:bold;line-height:16px;color:black;">
									 What is UBRELVY&#8482; (ubrogepant)?
								  </p>
								  <p style="text-align:left;margin:0px 0px 20px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									 UBRELVY is a prescription medicine used for the acute treatment of migraine attacks with or without aura in adults. UBRELVY is not used to prevent migraine headaches.
								  </p>
								  <p style="text-align:left;margin:20px 0px 20px 30px;font-size:12px;font-weight:normal;line-height:16px;color:black;">
									  Please see full <a href="https://media.allergan.com/products/Ubrelvy_pi.pdf?aimlink=6d15a2d396d36679ff9e8c4355c27da4&aimtoken=NTk4ODU0NS0zYTc3YmI1ZQ#page=14" style="color:#2e3192;text-decoration:none;">Patient Information</a>.
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="text-align:center;margin:20px 0px 10px 30px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;">
								  <a href="https://www.ubrelvy.com/?cid=EM-Ubr_Excedrin_OTC_HU-Footer_Ubr_Logo">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/ubrelvy-logo.png" width="200" alt="Ubrelvy Logo"/>
								  </a>
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="margin:20px 0px 20px 85px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;text-align:right;">
								   <a href="https://www.facebook.com/ubrelvy">
									   <img src="https://www.migraine.com/weekly/2020-Ubrelvy/social-facebook.png" width="30" alt="Facebook Social Page"/>
								   </a>
								  </p>
							  </td>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="margin:20px 0px 20px 0px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;text-align:center;">
								   <a href="https://www.twitter.com/ubrelvy">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/social-twitter.png" width="30" alt="Twitter Social Page"/>
								   </a>
								  </p>
							  </td>
							 <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="margin:20px 80px 20px 0px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;text-align:left;">
								  <a href="https://www.instagram.com/ubrelvy">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/social-instagram.png" width="30" alt="Instagram Social Page"/>
								  </a>
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="text-align:center;margin:10px 0px 10px 30px;font-size:8px;font-weight:normal;line-height:10px;color:black;">
									PLEASE DO NOT REPLY TO THIS EMAIL. Emails sent to this account will not be read. If you would prefer not to receive further messages from<br> this sender, please <a href="#" style="color:#2e3192;text-decoration:none;">click here</a> and confirm your request. We respect your privacy.  See our <a href="https://www.allergan.com/privacy-and-terms/ccpa?cid=EM-Ubr_Excedrin_OTC_HU-Footer_California_Policy" style="text-decoration:none;color:#2e3192;">Privacy Policy</a> and <a href="https://www.allergan.com/privacy-and-terms/ccpa?cid=EM-Ubr_Excedrin_OTC_HU-Footer_California_Policy" style="text-decoration:none;color:#2e3192;">California Privacy Policy statements</a>.
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
						  <tr>
							  <td valign="top" class="no-mobile" style=" line-height:35px; vertical-align: top;font-family:arial;">
								 <p style="text-align:center;margin:20px 0px 10px 0px;font-size:20px;font-weight:bold;line-height:16px;color:#00a074;">
								  <a href="https://www.allergan.com?cid=EM-Ubr_Excedrin_OTC_HU-Footer_Allergan_logo">
									<img src="https://www.migraine.com/weekly/2020-Ubrelvy/allergan-logo-new.png" width="150" alt="Allergan Logo"/>
							      </a>
								  </p>
								  <p style="text-align:center;margin:10px 0px 10px 30px;font-size:8px;font-weight:normal;line-height:10px;color:black;">
									Allergan USA, Inc.<br>
									5 Giralda Farms<br>
								    Madison, NJ 07940
								  </p>
								  <p style="text-align:center;margin:10px 0px 10px 30px;font-size:8px;font-weight:normal;line-height:10px;color:black;">
									Allergan<sup style="line-height:0px;font-size:6px;">&reg;</sup> and its design are trademarks of Allergan, Inc.<br> UBRELVY&#8482; and its design are trademarks of Allergan Pharmaceuticals International Limited.<br> All trademarks are the property of their respective owners.<br> &copy; 2020 Allergan. All rights reserved.<br> UBR133165-V1 03/20
								  </p>
							  </td>
						  </tr>
						</table>
						<table width="100%" border="0" cellspacing="0" cellpadding="10" >
							<tr>
								<td class="no-mobile" style="text-align: left; font-family: Arial, sans-serif; font-size: 11px; line-height: 14px; color: #000000">
								<p style="text-align:center;" class="footer"><a target="_blank" href="https://migraine.com/?uuid=XXXXX-XXX-XXXXXX">
										 <img src="https://migraine.com/weekly/logo_masthead02_2x.png" alt="migraine.com" width="180" height="27" border="0" /></a><br />
										 <a href="https://migraine.com/about-us/?uuid=XXXXX-XXX-XXXXXX" style="color:#1E7EBE;font-weight:bold;">ABOUT US</a>&nbsp;&nbsp;&nbsp;
										 <a href="https://migraine.com/contact-us/?uuid=XXXXX-XXX-XXXXXX" style="color:#1E7EBE;font-weight:bold;">CONTACT US</a>&nbsp;&nbsp;&nbsp;
										 <a href="https://migraine.com/terms-of-use/?uuid=XXXXX-XXX-XXXXXX" style="color:#1E7EBE;font-weight:bold;">TERMS OF USE</a>&nbsp;&nbsp;&nbsp;
										 <a href="https://migraine.com/privacy-policy/?uuid=XXXXX-XXX-XXXXXX" style="color:#1E7EBE;font-weight:bold;">PRIVACY POLICY</a>&nbsp;&nbsp;&nbsp;
										 <a href="https://migraine.com/about-us/community-rules/?uuid=XXXXX-XXX-XXXXXX" style="color:#1E7EBE;font-weight:bold;">COMMUNITY RULES</a>
									 </p>
									 <p valign="top" >Please add <strong>%%SENDER%%</strong> to your e-mail address to ensure our e-mails reach your inbox. 
									 </p> 
									 <p valign="top" >This e-mail was sent from 
										 <a href="https://migraine.com/" style="text-decoration:none;color:black;font-weight:bold;">Migraine.com</a>, a property of Health Union, LLC, <a href="#" style="text-decoration:none;color:black;font-weight:bold;">1 International Plaza, Suite 550 Philadelphia, PA 19113</a>. We are sending this e-mail to you on behalf of our sponsor; your e-mail address has not been shared with the sponsor. To unsubscribe, <a href="https://umv5deo8vd.execute-api.us-east-1.amazonaws.com/api/unsubscribe?info=unsubscribe_hash" style="color:#1E7EBE;font-weight:bold;">click here</a>.</p>
									 <p style="padding-top: 10px;" valign="top"><em>&copy;2010-20 Health
										 Union. All rights reserved. This information is not     designed to replace a physician's
										 independent judgment about the appropriateness or risks of a procedure for a given patient. Always consult your doctor about your medical conditions. 
										 <a href="https://migraine.com/" style="text-decoration:underline;font-weight:bold;color:#1E7EBE">Migraine.com</a> does not provide medical advice, diagnosis or treatment. Use of the site is conditional upon your acceptance of our terms of use.</em>
									 </p>
								</td>
							 </tr>
						</table>

1 Ответ

0 голосов
/ 13 марта 2020

Это похоже на причуду Outlook, которая заключается в том, что она будет отображать изображения в их истинной ширине. Прежде всего, будьте очень осторожны с тем, как вы объявляете ширину. Используя атрибут HTML для ширины, вы не должны включать 'px' в конце рисунка. При использовании свойства CSS для ширины вы можете в конце добавить «px».

<!-- HTML attribute -->
<img src="..." width="227" />

<!-- CSS property -->
<img src="..." style="width:227px;" />

Теперь вернемся к проблеме, которую я нашел. Вы объявили изображение 'd-on-the- go -treatment.png' шириной 100%. Тем не менее, истинная ширина изображения составляет 642 пикселей. Чтобы обойти эту проблему в Outlook, вы можете изменить объявление ширины следующим образом:

<img src="https://www.migraine.com/weekly/2020-Ubrelvy/d-on-the-go-treatment.png" width="570" style="width:570px; max-width:100%;" alt="A New On-The-Go-Treatment"/>

Попробуйте и посмотрите, как это будет.

...