为什么我的电子邮件HTML在Outlook中显示为错误? [英] Why does my email HTML get rendered wrong in Outlook?

问题描述

我创建了以下HTML电子邮件提琴:

在过去的几天里，我一直在看这段代码并更改一些小东西，似乎无法修复此布局.

原始电子邮件是使用以下MJML构建的:

 < mjml>< mj-body background-color =#f2f8f9">< mj-section background-color =#77c5d5"；padding-bottom ="0px"padding-top ="0"< mj-column vertical-align ="top"宽度＝"100％".< mj-image src ="https://www.test.com/white-logo.png"alt =徽标"align ＝中心".border =无"width ="200px"padding-left ="0px"padding-right ="0px"padding-bottom ="10px"padding-top ="10px"</mj-image></mj-column></mj-section>< mj-section background-color =#FFFFFF"；padding-bottom ="0px"padding-top ="0"< mj-column vertical-align ="top"宽度＝"100％".< mj-text align ="center"color =#1a5966"font-size ="28px"font-weight =粗体"；font-family ="open Sans Helvetica，Arial，sans-serif"padding-left ="25px"padding-right ="25px"padding-bottom ="0px"padding-top ="25px"＞ Nieuwe vrijwilligers vacatures//mj-text></mj-column></mj-section>< mj-section background-color =#FFFFFF"；padding-bottom ="20px"< mj-column vertical-align ="top"宽度＝"100％".< mj-text align ="left"color =#000000"font-size ="18px"；font-family ="open Sans Helvetica，Arial，sans-serif"padding-left ="25px"padding-right ="25px"< span style =颜色:#000000">达格·约翰，</span></mj-text>< mj-text align ="left"color =#000000"font-size ="15px"font-family ="open Sans Helvetica，Arial，sans-serif"padding-left ="25px"padding-right ="25px"Er zijn enkele vrijwilligersvacatures bij jou in de buurt，passen bij jouw interesse.Bekijk甚至是heet iet voor jou的！Je kan ze ook doorturen naar vrienden.Het zou echt top zijn als ze geholpen kunnen worden< br/>< br/>Je kan je buurten en可以在je profiel中与匹配的steeds veranderen进行有趣的互动.</mj-text>< mj-button align ="center"href =" https://www.google.be"font-size ="18px"；font-weight =粗体"；background-color =#77c5d5"border ="2px实心#D9E9EB;"color =#ffffff"font-family ="open Sans Helvetica，Arial，sans-serif"> Zoek vrijwilligerswerk！</mj-button></mj-column></mj-section>< mj-section background-color =#FFFFFF">< mj-column vertical-align ="top"宽度＝"100％".< mj-divider border-width ="2px"border-style =实心"border-color =浅灰色"</mj-divider>< mj-text align ="center"color =#1a5966"font-size ="28px"font-weight =粗体"；font-family ="open Sans Helvetica，Arial，sans-serif"padding-left ="25px"padding-right ="25px"padding-bottom ="15px"padding-top ="15px"，Nieuwe将gevonden voor jou/mj-text替换为.< mj-divider border-width ="2px"border-style =实心"border-color =浅灰色"</mj-divider></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj-图像高度="125px" src ="https://test.com/vacancies/2568/banner-picture_1900.webp"</mj-image></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj-button href =" https://www.test.be/"font-size ="17px"font-family ="open Sans Helvetica，Arial，sans-serif"background-color =透明"color =#1a5966"text-align ="left"align ="left"宽度="100％"padding ="0"在BREE中的Nachtoppas达格</mj-button>< mj-text padding-bottom ="0"> Antwerpen(2000)</mj-text>< mj-text padding-bottom ="0"> Begeleiding</mj-text>< mj-text padding-top ="0"padding-bottom ="0"> Educatie//mj-text>.< mj-text padding-top ="0"> Jongeren</mj-text></mj-column>mj柱宽＝"100％".< mj-divider border-width ="2px"border-style =实心"border-color =浅灰色"</mj-divider></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj-图像高度="125px" src ="https://test.com/vacancies/2568/banner-picture_1900.webp"</mj-image></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj-button href =" https://www.test.be/"font-size ="17px"font-family ="open Sans Helvetica，Arial，sans-serif"background-color =透明"color =#1a5966"text-align ="left"align ="left"宽度="100％"padding ="0"弗里耶维格·沃尔夫·哈尔普·安·惠斯</mj-button>< mj-text padding-bottom ="0"> Antwerpen(2000)</mj-text>< mj-text padding-bottom ="0"> Begeleiding</mj-text>< mj-text padding-top ="0"padding-bottom ="0"> Educatie//mj-text>.< mj-text padding-top ="0"> Jongeren</mj-text></mj-column>< mj-column vertical-align ="top"宽度＝"100％".< mj-divider border-width ="2px"border-style =实心"border-color =浅灰色"</mj-divider>< mj-text align ="center"color =#1a5966"font-size ="28px"font-weight =粗体"；font-family ="open Sans Helvetica，Arial，sans-serif"padding-left ="25px"padding-right ="25px"padding-bottom ="15px"padding-top ="15px"> Andere interessante vacatures//mj-text></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj图像高度="125px" src ="https://test.com/vacancies/13333/banner-picture_1900.webp"</mj-image></mj-column>< mj-column vertical-align ="top"宽度＝"50％".< mj-button href =" https://www.test.be/"font-size ="17px"font-family ="open Sans Helvetica，Arial，sans-serif"background-color =透明"color =#1a5966"text-align ="left"align ="left"宽度="100％"padding ="0"CALM倒同居文化</mj-button>< mj-text padding-bottom ="0">布鲁塞尔(1000)</mj-text>< mj-text padding-bottom ="0"> Begeleiding</mj-text>< mj-text padding-top ="0"padding-bottom ="0"> Educatie/mj-text>< mj-text padding-top ="0"> Jongeren</mj-text></mj-column></mj-section>< mj-section padding-bottom ="0px"padding-top ="0"mj柱宽＝"100％".< mj-image src ="https://www.test.be/design/img/email-footer-no-clouds.png"alt =页脚"</mj-image></mj-column></mj-section>< mj-section padding-bottom ="0px"padding-top ="0"< mj-column vertical-align =中"宽度＝"100％".< mj-social font-size ="14px"icon-size ="25px"模式=水平"< mj-social-element name ='facebook'href =" https://www.facebook.com/test.be"</mj-social-element>< mj-social-element name ='instagram'href =" https://www.instagram.com/test.be/"</mj-social-element>< mj-social-element name ="linkedin"href =" https://www.linkedin.com/company/test"</mj-social-element></mj-social></mj-column></mj-section>< mj-section>< mj-column>< mj-text align ="center"font-size ="10px"padding-top ＝"0"＞版权2021-测试.</mj-text></mj-column></mj-section></mj-body></mjml> 

解决方案

MJML文档包括，节中的列总和不能大于父 mj-section 的宽度(或100％)."也许您在几个地方都有这个.这样会更好！

I've created the following HTML email fiddle: fiddle HTML email

The layout looks great on Gmail, Hotmail, and outlook web, but in Outlook Client it looks horrible, as can be seen in the screenshot below:

I've been looking at this code and changing small stuff for the past few days, and it seems to be impossible to fix this layout.

The original email was built using the following MJML:

<mjml>
  <mj-body background-color="#f2f8f9">
    <mj-section background-color="#77c5d5" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-image src="https://www.test.com/white-logo.png" alt="logo" align="center" border="none" width="200px" padding-left="0px" padding-right="0px" padding-bottom="10px" padding-top="10px"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="0px" padding-top="25px">Nieuwe vrijwilligers vacatures</mj-text>
      </mj-column>
    </mj-section>
    <mj-section background-color="#FFFFFF" padding-bottom="20px">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="left" color="#000000" font-size="18px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
          <span style="color:#000000">Dag John,</span>
        </mj-text>
        <mj-text align="left" color="#000000" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">
          Er zijn enkele vrijwilligersvacatures bij jou in de buurt, die passen bij jouw interesse. 
Bekijk even of het iets voor jou is! Je kan ze ook doorsturen naar vrienden. Het zou echt top zijn als ze geholpen kunnen worden
<br/><br/>
          Je kan je buurten en interesses voor een betere matching steeds veranderen in je profiel.
        </mj-text>
        <mj-button align="center" href="https://www.google.be" font-size="18px" font-weight="bold" background-color="#77c5d5" border="2px solid #D9E9EB;" color="#ffffff" font-family="open Sans Helvetica, Arial, sans-serif">Zoek vrijwilligerswerk!</mj-button>
      </mj-column>
    </mj-section>
    
  <mj-section background-color="#FFFFFF">
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Nieuwe vacatures gevonden voor jou</mj-text>
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Dag- of nachtoppas in BREE
      </mj-button>
      <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    <mj-column width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
    </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-image height="125px"src="https://test.com/vacancies/2568/banner-picture_1900.webp"></mj-image>
      </mj-column>
      <mj-column vertical-align="top" width="50%">
        <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          Vrijwilliger voor administratieve hulp aan huis
         </mj-button>
        <mj-text padding-bottom="0">Antwerpen (2000)</mj-text>
        <mj-text padding-bottom="0">Begeleiding</mj-text>
        <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
        <mj-text padding-top="0">Jongeren</mj-text>
      </mj-column>
    <mj-column vertical-align="top" width="100%">
        <mj-divider border-width="2px" border-style="solid" border-color="lightgrey"></mj-divider>
        <mj-text align="center" color="#1a5966" font-size="28px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="15px" padding-top="15px">Andere interessante vacatures</mj-text>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-image height="125px"src="https://test.com/vacancies/13333/banner-picture_1900.webp"></mj-image>
    </mj-column>
    <mj-column vertical-align="top" width="50%">
      <mj-button href="https://www.test.be/" font-size="17px" font-family="open Sans Helvetica, Arial, sans-serif" background-color="transparent" color="#1a5966" text-align="left" align="left" width="100%" padding="0">
          CALM pour une cohabitation interculturelle
      </mj-button>
      <mj-text padding-bottom="0">Brussel (1000)</mj-text>
      <mj-text padding-bottom="0">Begeleiding</mj-text>
      <mj-text padding-top="0" padding-bottom="0">Educatie</mj-text>
      <mj-text padding-top="0">Jongeren</mj-text>
    </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column width="100%">
        <mj-image src="https://www.test.be/design/img/email-footer-no-clouds.png" alt="footer"></mj-image>
      </mj-column>
    </mj-section>
    <mj-section padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="middle" width="100%">
        <mj-social font-size="14px" icon-size="25px" mode="horizontal">
          <mj-social-element name="facebook" href="https://www.facebook.com/test.be"></mj-social-element>
          <mj-social-element name="instagram" href="https://www.instagram.com/test.be/"></mj-social-element>
          <mj-social-element  name="linkedin" href="https://www.linkedin.com/company/test"></mj-social-element>
        </mj-social>
      </mj-column>
    </mj-section>
    <mj-section>
      <mj-column>
        <mj-text align="center" font-size="10px" padding-top="0">Copyright 2021 - test. Alle rechten voorbehouden.</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

解决方案

MJML documentation includes, "The sum of columns in a section cannot be greater than the width of the parent mj-section (or 100%)." Maybe you have this in a couple places. That'll make it better!

这篇关于为什么我的电子邮件HTML在Outlook中显示为错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！