Outlook中的按钮无法正确显示

时间:2019-11-14 11:14:15

标签: html css html-email

它可以在除Outlook外的任何其他电子邮件客户端中使用。知道如何在Outlook中使用它吗?

这是它在Outlook中的外观:

Outlook screenshot

<html xmlns="http://www.w3.org/1999/xhtml" style="margin:0;padding:0;"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body style="font-family:'Roboto Condensed', Arial, Sans-Serif;-webkit-text-size-adjust:none;-ms-text-size-adjust:none;margin:0;padding:0;min-height:1000px;color:#333333;background:#ffffff;font-size:13px;line-height:1.4;-webkit-font-smoothing:antialiased;width:100% !important;"><table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> <meta name="referrer" content="no-referrer"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test newsletter</title> <!--[if mso]> <style type="text/css"> body, table, td, span, p, a, h1,h2,h3,h4,h5 {font-family: Arial, sans-serif !important} </style> <![endif]--> <style type="text/css"> /* Forces Hotmail to display normal line spacing. */ .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height:100%;} /* Resets all body margins and padding to "0" for good measure. */ /* Resolves the Outlook 2007, 2010, and Gmail td padding issue. */ div[style*="margin: 16px 0"] { margin:0 !important; } /* What it does: Stops Outlook from adding extra spacing to tables. */ table, td { mso-table-lspace: 0pt !important; mso-table-rspace: 0pt !important; } /* What it does: Stops iOS links in blue and underlined */ a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important;} @media screen and (max-width:480px) { .no_mobile{ display:none; width:0; height:0; opacity:0; visibility: collapse; } } </style> <style type="text/css">div.preheader { display: none !important; } </style><div class="preheader" style="font-size: 1px; display: none !important;">With insulated cycle, run &amp; outdoor kit.</div> <!-- Google Script --> <div itemscope="" itemtype="http://schema.org/EmailMessage"> <div itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization"> <meta itemprop="name" content="test"> <link itemprop="url" href="http://www.test.co.uk"> <link itemprop="url/googlePlus" href="https://plus.google.com/+test"> </div> <div itemprop="about" itemscope="" itemtype="http://schema.org/Offer"> <link itemprop="image" href="http://www.teststatic.com/images/email/google-promotions/google-promotions-test-road-image.jpg?x=1"> </div> </div> <!-- End Google Script --> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <table cellpadding="0" class="fullwidth2" cellspacing="0" align="center" width="600" style="width:600px; background-color:#ffffff; table-layout: fixed;"> <tbody><tr> <td align="center" width="600" style="width:600px;"> <span style="color:#3c3c3b; overflow:hidden; font-family:'Roboto Condensed', arial, sans-serif; font-size:11px; line-height:20px; font-weight:normal; text-align:center;"><a href="https://view.emails.test.com/?qs=938517e6ba3b066d98a000b3a4c164a41ea1086cf1850602d9c6689e2a32b167a715dee6ae1e91a1af68a50e1442f5e1bbf907e2ca37ae299bb33f64cd930b40" alias="Web Version" target="_blank" style="font-size:11px; color: #959595; text-decoration: none;">Trouble viewing this email? View in browser</a></span> </td> </tr></tbody></table> <!--end - view online--> <!-- White divider --> <!--header logo--> <!--end header-logo--> <!-- White divider --> <!--navigation end--></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!--core content--> <!-- White divider --> <table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="15" style="height:15px; background-color:#ffffff;"></td></tr></tbody></table></td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23688&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Cycle_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23546&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Cycle_2#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23637&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Run_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23554&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Run_2#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23631&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Swim_1#product-list"></a> </td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://www.test.co.uk//?r=23666&amp;ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Swim_2#product-list"></a> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --> <table width="600" class="deviceWidth" border="0" cellpadding="0" cellspacing="0" align="center" style="margin:0 auto; "> <tbody><tr> </tr></tbody></table> <!--core content--> <table class="fullwidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing:0;width:600px;margin:0 auto; width:600px; background-color:#f5f5f5;"> <tbody><tr> <td style="border-collapse:collapse;"> <a target="_blank" href="http://www.test.co.uk/black-friday?ris=1&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=BF-app"></a> </td> </tr> </tbody></table> <!-- White divider --> <table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="15" style="height:15px; background-color:#ffffff;"></td></tr></tbody></table> <!-- UK Content End --> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --> <table class="fullwidth" border="0" cellpadding="0" cellspacing="0" align="center" style="border-spacing:0;width:600px;margin:0 auto; width:600px; background-color:#f5f5f5;"> <tbody><tr> <td style="border-collapse:collapse;"> <a target="_blank" href="https://www.test.co.uk/garmin-edge-520-plus-gps-cycle-computer?utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=Deal_2#product-list"></a> </td> </tr> </tbody></table> <!-- UK Content End --></td></tr></tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style=" width:600px; background-color:#e7e7e7;"><tbody><tr><td> <a target="_blank" href="https://guides.test.co.uk/innovative-insulation-cycling-explained?utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=blog"></a> </td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"></td></tr></tbody></table> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- UK Content Start --><!-- UK Content End --></td></tr></tbody></table></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"><!-- Fist column--><strong></strong><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0;padding:0;Margin:0;width:100%;height:100%;background-repeat:repeat;background-position:center top"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse;border-spacing:0px;table-layout:fixed!important;width:100%"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><table width="600" cellspacing="0" cellpadding="0" bgcolor="#ffffff" align="center" style="border-collapse:collapse;border-spacing:0px;background-color:#ffffff"><tbody><tr style="border-collapse:collapse"><td align="left" style="Margin:0;padding-top:20px;padding-bottom:20px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/DpJ9n2B/1.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="270"></a></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellspacing="0" cellpadding="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table width="100%" cellspacing="0" cellpadding="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/DpJ9n2B/1.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="270"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:20px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:none;color:#111812" href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Classic Bib Shorts" target="_blank"> Product 1</a></strong></p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:none;color:#111812" target="_blank">Product 2</a></strong></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:16px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#333333"><strong><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:16px;text-decoration:none;color:#111812" target="_blank">£50.00</a></strong></p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><p style="Margin:0;font-size:16px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#111812"><strong><a style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:16px;text-decoration:none;color:#111812" href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Bib Shorts" target="_blank">£35.00</a></strong></p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-top:10px;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Classic Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/mzGR8xX/4-5.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="130"></a></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:0;Margin:0"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Bib Shorts" style="font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:14px;text-decoration:underline;color:#2cb543" target="_blank"><img src="https://i.ibb.co/mzGR8xX/4-5.png" alt="" style="display:block;border:0;outline:none;text-decoration:none" width="130"></a></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#999;text-align:center">(563)</p></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0"><p style="Margin:0;font-size:14px;font-family:arial,'helvetica neue',helvetica,sans-serif;line-height:21px;color:#999;text-align:center">(413)</p></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"><td align="left" style="padding:0;Margin:0;padding-left:20px;padding-right:20px"><table width="560" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border-spacing:0px;float:left"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:10px;Margin:0"><span style="border-style:solid;border-color:#2cb543;background:#3c3c3b;border-width:0px;display:inline-block;border-radius:5px;width:auto"><a href="https://www.test.co.uk/dhb-classic-bib-shorts-1?sku=100420200&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Classic Bib Shorts" style="text-decoration:none;font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:12px;color:#fff;border-style:solid;border-color:#3c3c3b;border-width:15px 25px;display:inline-block;background:#3c3c3b;border-radius:5px;font-weight:normal;font-style:normal;line-height:14px;width:auto;text-align:center" target="_blank">SHOP NOW</a></span></td></tr></tbody></table></td><td width="20" style="padding:0;Margin:0"></td></tr></tbody></table></td><td valign="top" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" align="right" style="border-collapse:collapse;border-spacing:0px;float:right"><tbody><tr style="border-collapse:collapse"><td width="270" align="left" style="padding:0;Margin:0"><table cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;border-spacing:0px"><tbody><tr style="border-collapse:collapse"><td align="center" style="padding:10px;Margin:0"><span style="border-style:solid;border-color:#2cb543;background:#3c3c3b;border-width:0px;display:inline-block;border-radius:5px;width:auto"><a href="https://www.test.co.uk/dhb-bib-shorts-1?sku=100330314&amp;utm_source=3728gb-46-wed&amp;utm_medium=email&amp;utm_campaign=cycle-segment&amp;utm_content=dhb Bib Shorts" style="text-decoration:none;font-family:arial,'helvetica neue',helvetica,sans-serif;font-size:12px;color:#fff;border-style:solid;border-color:#3c3c3b;border-width:15px 25px;display:inline-block;background:#3c3c3b;border-radius:5px;font-weight:normal;font-style:normal;line-height:14px;width:auto;text-align:center pad" target="_blank">SHOP NOW</a></span></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr><tr style="border-collapse:collapse"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><!-- // END BODY --><pre><span style="font-size:9px;"></span></pre><!-- // END TEMPLATE --></td></tr></tbody></table> </td> </tr> </tbody></table> <table class="fullwidth" cellpadding="0" cellspacing="0" align="center" style="font-family:'Roboto Condensed', Arial, Sans-Serif; width:600px; background-color:#ffffff;"> <tbody><tr> <td> <table cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%; " class="stylingblock-content-wrapper"><tbody><tr><td class="stylingblock-content-wrapper camarker-inner"> <!-- White divider --><table class="fullwidth" style="width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"><tbody><tr><td height="0" style="height:0px; background-color:#ffffff;"></td></tr></tbody></table><!-- Start footer --> <table bgcolor="#3b3b3c" cellspacing="0" cellpadding="0" class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" border="0" align="center"> <tbody><tr> <td> <table class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> <!--social media icons--> <!-- White divider --> <table class="fullwidth" style="border-spacing:0; width:600px; margin:0 auto; width:600px;" cellpadding="0" cellspacing="0" border="0" bgcolor="3b3b3c" align="center"> <tbody><tr> </tr> </tbody></table> <!--end social media icons--> <!--App store icons--> <table border="0" class="fullwidth" style="border-spacing:0; width:600px; margin:0 auto; width:600px;" cellpadding="0" cellspacing="0" bgcolor="#3b3b3c" align="center"> <tbody><tr> </tr> </tbody></table> <!-- White divider --> <table bgcolor="#3b3b3c" class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> <!-- footer t&cs--> <!--end footer t&cs--> <!-- White divider --> <table class="fullwidth" style="border-spacing:0;width:600px;margin:0 auto;width:600px;" bgcolor="#3b3b3c" cellpadding="0" cellspacing="0" border="0" align="center"> <tbody> <tr> </tr> </tbody> </table> </td> </tr> </tbody></table> <!-- Device Pixel --></td></tr></tbody></table> </td> </tr> </tbody></table><!-- end banner --></body></html>

2 个答案:

答案 0 :(得分:3)

Outlook dosnt支持边界半径,并且对边界宽度的支持较差。

您可以在此处border-radiusborder-width

看到邮件客户端支持列表。

因此您要么必须稍稍更改代码,以使文本周围的间距(带有填充)保持不变,但就不会出现圆角。或者您可以将此服务用于nice buttons

答案 1 :(得分:3)

是的,正如Bidstrup指出的那样,Windows Outlook不支持border-radius,并且通常对Box模型的支持不佳。 IMO,您的Outlook屏幕快照对我来说看起来不错!

在Stack Overflow,我们对电子邮件按钮进行如下编码:

<td style="border-radius: 4px; background: #0095ff; text-align: center;">
    <a href="#" style="background: #0095FF; border: 1px solid #0077cc; box-shadow: inset 0 1px 0 0 rgba(102,191,255,.75); font-family: arial, sans-serif; font-size: 17px; line-height: 17px; color: #ffffff; text-align: center; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;">
        …
    </a>
</td>

Link to our design system

但是我们知道border-radiusbox-shadow之类的内容在Outlook中无声地失败了,我们可以接受。