css Outlook MacOs设备中的HTML电子邮件问题

mrphzbgm  于 2023-03-09  发布在  Mac
关注(0)|答案(1)|浏览(144)

这是我的电子邮件代码，这看起来很好，在所有其他电子邮件客户端（iPhone，Windows Outlook，浏览器）除了MacBook Pro这是运行在Macos Monterey版本.我没有添加所有的想法建议Stackoverflow和没有结果.请注意，我没有设备，我必须转发给我的客户端，并做测试.
附上MacOs Monterey 设备的屏幕截图和它应该如何看的屏幕截图。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--[if !mso]><!--> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<![endif]--> 
    <link rel="shortcut icon" type="image/ico" href="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="x-apple-disable-message-reformatting">
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
    <meta name="color-scheme" content="light">
    <meta name="supported-color-schemes" content="light">
    <title>Test</title>
    <!--[if mso]>
    <style>
      table {border-collapse:collapse;border-spacing:0;border:none;margin:0;}
      div, td {padding:0;}
      div {margin:0 !important;}
      p { padding:0px !important; margin-top: 8px !important; margin-bottom: 8px !important; mso-line-height-rule: exactly;}
      .ExternalClass p { margin:0;}
      .ExternalClass h2 { margin-top:0;}
    </style>
    <noscript>
      <xml>
        <o:OfficeDocumentSettings>
          <o:Allowjpg/>
          <o:PixelsPerInch>96</o:PixelsPerInch>
        </o:OfficeDocumentSettings>
      </xml>
    </noscript>
    <![endif]--> 
    <!--[if gt mso 15]>
    <style type="text/css" media="all">
      table, tr, td {border-collapse: collapse;}
      tr { font-size:0px; line-height:0px; border-collapse: collapse; }
      p { padding:0px !important; margin-top: 8px !important; margin-bottom: 8px !important; mso-line-height-rule: exactly;}
      .ExternalClass p { margin:0;}
      .ExternalClass h2 { margin-top:0;}
    </style>
    <![endif]--> 
    <!--[if gte mso 9]>
    <xml>
      <o:OfficeDocumentSettings>
        <o:AllowPNG/>
        <o:PixelsPerInch>96</o:PixelsPerInch>
      </o:OfficeDocumentSettings>
    </xml>
    <![endif]--> 
    <style type="text/css">
      p {
      margin-top: 8px !important;
      margin-bottom: 8px !important;
      mso-line-height-rule: exactly;
      padding: 0px !important;
      }
      a {
      text-decoration: none;
      }
      ul li {
      margin-top: 8px;
      }
      .td img {
      max-width: 560px;
      }
      .show_desk {
      display: block;
      }
      _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) #bannerDiv2, _:-webkit-full-screen, _::-webkit-full-page-media, _:future, :root .body:not(.Singleton) #bannerDiv1 {
      width:50% !important;
      }
      @media screen and (max-width: 600px) {
      .mobilepadding {
      padding: 5px 0px !important;
      }
      table.width-half {
      width: 50% !important;
      float: left;
      height: 120px;
      }
      .desktop-masthead {
      width: 100% !important;
      height: auto !important;
      }
      .hide_mob {
      display: none !important;
      mso-hide: all;
      }
      .max-width {
      max-width: 100% !important;
      width: 100% !important;
      height: auto !important;
      }
      table#marginLeft {
      margin-left: 0px !important;
      margin-right: 0px !important;
      }
      .margintop {
      margin-top: 0px !important;
      }
      .max-width-pad {
      max-width: 100% !important;
      width: 100% !important;
      margin-bottom: 20px !important;
      margin-left: 0px !important;
      }
      .textLeft {
      text-align: left !important;
      }
      }
      @media only screen and (max-width: 480px) {
      .mobile_view_padding {
      padding-left: 15px !important;
      padding-right: 15px !important;
      }
      .mobile_padding_left {
      padding-left: 0px !important;
      }
      .mobile_margin_top {
      margin-top: 20px !important;
      }
      .mobile_padding {
      padding: 20px !important;
      }
      .drop {
      width: 100% !important;
      float: left !important;
      text-align: center;
      }
      .show_mob {
      display: block !important;
      }
      .col-lge {
      margin-top: 10px;
      }
      .rightimg {
      max-width: 100% !important;
      text-align: center !important;
      }
      .col-lge {
      margin-top: 10px;
      padding-left: 0px !important;
      padding-right: 0px !important;
      }
      table[class="off-set-img"],
      table[class="off-set-img-text"] {
      width: 100% !important;
      }
      .mobileCenter {
      text-align: center !important;
      }
      .mobileMargin {
      margin: 0 auto;
      }
      .mobileFont {
      font-size: 14px !important;
      }
      #Asset_CTA p,
      #content5text p,
      #content5text h2,
      #content4text p,
      #content4text h2 {
      text-align: center !important;
      }
      #Asset_CTA .max-width {
      width: 100% !important;
      }
      }
      @media screen and (max-width: 420px) {
      .two-column .column,
      .three-column .column {
      max-width: 100% !important;
      }
      .two-column img {
      max-width: 100% !important;
      }
      .inner-space-right {
      padding: 0px !important;
      }
      .inner-space-left {
      padding-left: 0px !important;
      padding-top: 10px;
      }
      .mobileBanner {
      max-width: 100% !important;
      }
      }
      /*** Gmail Anchor Fix ***/
      a[href^=tel], a[x-apple-data-detectors] {
      color: #009845 !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
      }
      u+#body a {
      color: #009845 !important;
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
      }
      #MessageViewBody a {
      font-size: inherit !important;
      font-family: inherit !important;
      font-weight: inherit !important;
      line-height: inherit !important;
      }
    </style>
  </head>
  <body class="class" id="body" bgcolor="#f5f4f8" style="margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; margin-left:0 !important; padding-top:0; padding-bottom:0; padding-right:0; padding-left:0; background-color:#f5f4f8; font-size:14px; color:#54565A; line-height:17px; ">
    
    <div id="emailPreHeader" style="mso-hide:all; visibility:hidden; opacity:0; color:transparent; mso-line-height-rule:exactly; line-height:0; font-size:0px; overflow:hidden; border-width:0; display:none !important;"> Conference</div>
    <div class="ExternalClass">
      <center class="wrapper" style="  width:100%; table-layout:fixed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; ">
        <div class="webkit" style=" max-width:600px; margin-top:0; margin-bottom:0; margin-right:auto; margin-left:auto; ">
          <!--[if (gte mso 9)|(IE)]>
          <table width="600" align="center" style="border-spacing:0; font-family:'Source Sans Pro',Arial,sans-serif; color:#54565A; font-size:14px; line-height:17px;" >
            <tr>
              <td>
                <![endif]--> 
                <table class="outer mktoContainer" id="wrapper" align="center" border="0" cellpadding="0" cellspacing="0" style="border-spacing:0; font-family:'Source Sans Pro',Arial,sans-serif; color:#54565A; Margin:0 auto; width:100%; max-width:600px; ">
                  <tbody>
                    <tr class="mktoModule" id="TopBar1" mktoname="topbar">
                      <td bgcolor="#f5f4f8" valign="top" class="max-width" style="font-size:0;padding: 10px 25px 10px 25px; width:100%;" align="left">
                        <table bgcolor="#f5f4f8" style="mso-cellspacing: 0px; mso-padding-alt: 0px; border-collapse:collapse; float: left" width="100%" cellspacing="0" cellpadding="0" border="0" align="left">
                          <tbody>
                            <tr>
                              <td width="30%" bgcolor="#f5f4f8" align="left" valign="top">
                                <div class="mktoSnippet" id="TopBarLogoURL1" mktoname="topbar1"></div>
                              </td>
                              <td class="mktoText" id="TopRight" mktoname="topbar2" width="50%" bgcolor="#f5f4f8" align="right" valign="middle" style="font-family:'Source Sans Pro',Arial,sans-serif;font-size:14px;font-weight:bold;color:#54565A;line-height:17px;">
                                <div> 
                                  <span style="color: #009845; font-weight: bold;">April 17-20, 2023</span> 
                                  
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr class="mktoModule" id="banner2f016f2d6-f095-4213-9158-a3891795fef4" mktoname="banner1">
                      <td align="left" valign="top">
                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tbody>
                            <tr>
                              <td align="left" valign="top" bgcolor="#c4cfda">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tbody>
                                    <tr>
                                      <td align="left" valign="top" width="100%">
                                        <!--[if (gte mso 9)|(IE)]>
                                        <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="font-family:'Source Sans Pro',Arial,sans-serif;">
                                          <tr>
                                            <td align="left" valign="top" width="50%" style="width:50%;">
                                              <![endif]--> 
                                              <table id="bannerDiv1" align="left" width="300" border="0" cellspacing="0" cellpadding="0" class="max-width" style="width:300px;">
                                                <tbody>
                                                  <tr>
                                                    <td style="font-family:'Source Sans Pro',Arial,sans-serif; color: #ffffff; font-size: 14px; line-height: 17px;mso-line-height-rule: exactly;padding-top:25px;padding-bottom:25px;padding-right:25px;padding-left:25px;" class="mktEditable" width="100%" valign="middle" id="bannerBtext3a5fd894-6471-42df-9fd9-6bef789e47f8">
                                                      <div style="font-size: 26px; font-weight: bold; line-height: 28px; mso-line-height-rule: exactly; color: #1c355e;">
                                                        Can’t-miss Analytics Sessions 
                                                      </div>
                                                      <table style="mso-cellspacing: 0px; mso-padding-alt: 0px; height: 30px; text-align: center; -webkit-text-size-adjust: none;" cellspacing="0" cellpadding="0" border="0">
                                                        <tbody>
                                                          <tr>
                                                            <td height="13"></td>
                                                          </tr>
                                                          <tr>
                                                            <td style="font-family: 'Source Sans Pro',Arial,sans-serif; -webkit-border-radius: 0px; border-radius: 0px; padding: 6px 12px; height: 20px; font-size: 14px; color: #ffffff;" bgcolor="#009845" align="center"><a href="#" target="_blank" style="font-size: 14px; font-family: 'Source Sans Pro',Arial,sans-serif; color: #ffffff !important; text-decoration: none; display: inline-block; font-weight: bold !important; ‑webkit‑text‑size‑adjust: none; letter-spacing: 0.5px;">Register and Save $200</a></td>
                                                          </tr>
                                                        </tbody>
                                                      </table>
                                                    </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                              <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                            <td align="right" bgcolor="#c4cfda" valign="top" width="50%" border="0" style="width:50%;">
                                              <![endif]--> 
                                              <table id="bannerDiv2" style="width:300px; height: 150px; mso-cellspacing: 0px; mso-padding-alt: 0px; border-collapse:collapse; " width="300" height="150" cellspacing="0" valign="top" cellpadding="0" border="0" class="max-width">
                                                <tbody>
                                                  <tr>
                                                    <td align="right" valign="top" border="0"> <a style="text-align: center;" href="#" target="_blank" class="show_desk"> <img src="https://dummyimage.com/300x150/cccccc/fff" style=" display:inline-block;height: auto !important; vertical-align:top;max-width:300px;width:100%;border:none; outline:none; text-decoration:none;" alt="test" width="300" border="0" class="mktoImg mobileBanner" mktoname="bannerimage" id="bannerBimage6644e4bb-24b2-468e-99de-dfb80e89dd7a" mktolockimgsize="true"> </a> </td>
                                                  </tr>
                                                </tbody>
                                              </table>
                                              <!--[if (gte mso 9)|(IE)]>
                                            </td>
                                          </tr>
                                        </table>
                                        <![endif]--> 
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr class="mktoModule" id="ContentDiv167ac3859-aadc-469c-9623-4a99af29aed4" mktoname="content1">
                      <td class="one-column inner mobile_view_padding" bgcolor="#FFFFFF" style="padding-top:20px;padding-bottom:5px;padding-right:25px;padding-left:25px;">
                        <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family:'Source Sans Pro',Arial,sans-serif;color:#54565A;">
                          <tbody>
                            <tr>
                              <td class="text" style="font-family:'Source Sans Pro',Arial,sans-serif; font-size:14px;color:#54565A;line-height:17px;">
                                <div class="mktoText" id="Content1d83c9e44-ca8e-4a2d-a96b-d464e27c691e" mktoname="content2">
                                  <h2 style="font-family: 'Source Sans Pro',Arial,sans-serif; font-size: 20px; font-weight: bold; text-align: center; margin: 0px 0px 0px 0px; line-height: 22px; color: #009845; display: block; -webkit-text-size-adjust: none;">Lorem ipsum dolor sit amet, consectetur adipiscing eli.</h2>
                                  <p style="text-align: center; font-size: 16px; margin-top: 2px !important;">eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                  <table style="mso-cellspacing: 0px; mso-padding-alt: 0px 0px 0px 0px; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 0px 0px 0px;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
                                    <tbody>
                                      <tr>
                                        <td height="20"></td>
                                      </tr>
                                      <tr>
                                        <td class="max-width" style="font-size: 0;" valign="top" align="center">
                                          <!--[if (gte mso 9)|(IE)]>
                                          <table align="center" border="0" cellspacing="0" cellpadding="0" width="100%" style="font-family:'Source Sans Pro',Arial,sans-serif;">
                                            <tr>
                                              <td align="left" valign="top" width="30%">
                                                <![endif]--> 
                                                <table style="width: 170px; mso-cellspacing: 0px; mso-padding-alt: 0px; border-collapse: collapse; margin: 0 auto;" class="max-width-remove-height max-width-pad" width="170" cellspacing="0" cellpadding="0" border="0" align="left">
                                                  <tbody>
                                                    <tr>
                                                      <td align="center">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="120">
                                                          <tbody>
                                                            <tr>
                                                              <td height="10" bgcolor="#870064"></td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td style="font-family: 'Source Sans Pro',Arial,sans-serif; color: #54565a; font-size: 14px; line-height: 1.2; text-align: center !important; padding: 10px 10px 10px 10px; mso-padding-alt: 10px 10px 15px 10px; ‑webkit‑text‑size‑adjust: none;" width="100%" valign="top" align="center">
                                                        <div id="Speaker4Name">
                                                          <h2 class="text-center" style="font-size: 14px; color: #54565a; margin: 0px 0; line-height: 1.2; ‑webkit‑text‑size‑adjust: none; font-weight: normal;">Sed ut perspiciatis unde omnis iste natus error</h2>
                                                        </div>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                                <!--[if (gte mso 9)|(IE)]>
                                              </td>
                                              <td width="5%" style="font-size: 1px;">&nbsp;</td>
                                              <td align="left" valign="top" width="30%">
                                                <![endif]--> 
                                                <table style="width: 170px; mso-cellspacing: 0px; mso-padding-alt: 0px; border-collapse: collapse; margin-left: 20px;" class="max-width-remove-height max-width-pad pad-bottom-center" width="170" cellspacing="0" cellpadding="0" border="0" align="left">
                                                  <tbody>
                                                    <tr>
                                                      <td align="center">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="120">
                                                          <tbody>
                                                            <tr>
                                                              <td height="10" bgcolor="#870064"></td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td align="center" style="font-family: 'Source Sans Pro',Arial,sans-serif; color: #54565a; font-size: 14px; line-height: 1.2; text-align: center !important; padding: 10px 10px 10px 10px; mso-padding-alt: 10px 10px 15px 10px; ‑webkit‑text‑size‑adjust: none;" width="100%" valign="top">
                                                        <div id="Speaker5Name">
                                                          <h2 class="text-center" style="font-size: 14px; color: #54565a; margin: 0px 0; line-height: 1.2; ‑webkit‑text‑size‑adjust: none; font-weight: normal;">Sed ut perspiciatis unde omnis iste natus error</h2>
                                                        </div>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                                <!--[if (gte mso 9)|(IE)]>
                                              </td>
                                              <td width="5%" style="font-size: 1px;">&nbsp;</td>
                                              <td align="left" valign="top" width="30%">
                                                <![endif]--> 
                                                <table style="width: 170px; mso-cellspacing: 0px; mso-padding-alt: 0px; border-collapse: collapse; margin-left: 20px;" class="max-width-remove-height max-width-pad pad-bottom-center" width="170" cellspacing="0" cellpadding="0" border="0" align="left">
                                                  <tbody>
                                                    <tr>
                                                      <td align="center">
                                                        <table cellpadding="0" cellspacing="0" border="0" width="120">
                                                          <tbody>
                                                            <tr>
                                                              <td height="10" bgcolor="#870064"></td>
                                                            </tr>
                                                          </tbody>
                                                        </table>
                                                      </td>
                                                    </tr>
                                                    <tr>
                                                      <td align="center" style="font-family: 'Source Sans Pro',Arial,sans-serif; color: #54565a; font-size: 14px; line-height: 1.2; text-align: center !important; padding: 10px 10px 10px 10px; mso-padding-alt: 10px 10px 15px 10px; ‑webkit‑text‑size‑adjust: none;" width="100%" valign="top">
                                                        <div id="Speaker6Name">
                                                          <h2 class="text-center" style="font-size: 14px; color: #54565a; margin: 0px 0; line-height: 1.2; ‑webkit‑text‑size‑adjust: none; font-weight: normal;">Sed ut perspiciatis unde omnis iste natus error</h2>
                                                        </div>
                                                      </td>
                                                    </tr>
                                                  </tbody>
                                                </table>
                                                <!--[if (gte mso 9)|(IE)]>
                                              </td>
                                            </tr>
                                          </table>
                                          <![endif]-->
                                        </td>
                                      </tr>
                                      <!-- three speaker --> 
                                    </tbody>
                                  </table>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                    <tr class="mktoModule" id="ContentDiv1" mktoname="asdjhasd">
                      <td class="one-column inner mobile_view_padding" bgcolor="#FFFFFF" style="padding-top:10px;padding-bottom:20px;padding-right:25px;padding-left:25px;">
                        <table width="100%" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family:'Source Sans Pro',Arial,sans-serif;color:#54565A;">
                          <tbody>
                            <tr>
                              <td class="text" style="font-family:'Source Sans Pro',Arial,sans-serif; font-size:14px;color:#54565A;line-height:17px;">
                                <div class="mktoText" id="Content1" mktoname="asdjhasd">
                                  <p style="text-align: center; font-size: 16px;"><a href="#" target="_blank" style="color: #009845; text-decoration: underline;">100+ sessions</a> filled with the hottest tips, latest innovations<br>and best success stories.</p>
                                  <table cellpadding="0" cellspacing="0" width="100%">
                                    <tbody>
                                      <tr>
                                        <td width="100%" align="center">
                                          <table cellspacing="0" cellpadding="0" border="0">
                                            <tbody>
                                              <tr>
                                                <td align="center" style="border-radius: 0px; padding: 6px 28px; height: 20px; font-family: 'Source Sans Pro',Arial,sans-serif; color: #ffffff;" bgcolor="#009845"><a href="#" target="_blank" style="font-family: 'Source Sans Pro',Arial,sans-serif; font-size: 14px; color: #ffffff !important; text-decoration: none; font-weight: bold !important; display: inline-block;">Register Today &gt;</a></td>
                                              </tr>
                                            </tbody>
                                          </table>
                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
                <!--[if (gte mso 9)|(IE)]>
              </td>
            </tr>
          </table>
          <![endif]--> 
        </div>
      </center>
    </div>
  </body>
</html> ```
css

1条答案

按热度按时间
zvms9eto

zvms9eto1#

Outlook Mac的新版本存在一个错误，它不读取/喜欢对齐属性。
您可以通过删除这些值来进行某种测试，然后查看截屏的布局。
解决方案是使用float：left或float：right样式。
例如，将<table ... align="left" ...>更改为<table ... align="left" style="float:left;..." ...>（并将右对齐到float：right）。
我认为您可能需要align属性来做其他事情，因此为了安全起见，请将其保留在那里。

赞(0）分享  回复(0）举报  2023-03-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com