所有版本的 Outlook 中的 HTML 電子郵件問題

Question

我有一封電子郵件，發給我正在處理的一個客戶。 它在除 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>

Answer 1

這看起來歸結為 Outlook 的一個怪癖，即它會以真實的寬度顯示圖像。 首先，要非常小心你如何聲明寬度。 使用寬度的 HTML 屬性，您不應在圖的末尾包含“px”。 將 CSS 屬性用於寬度時，您可以在末尾包含“px”。

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

現在，回到我發現的問題。 您已聲明寬度為 100% 的“d-on-the-go-treatment.png”圖像。 但是，圖像的真實寬度是 642px。 要在 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"/>

試試看，看看效果如何。