所以我用mjml制作了以下模板。由于某些奇怪的原因，应用程序链接按钮图像没有达到全高。此外，社交链接图标图像也发生同样的情况。对于这两组图像，我尝试将图标图像包装在 anchor 标记内，然后为图像和 anchor 元素提供明确的高度，但仍然没有成功。
<mjml>
<mj-head>
<mj-font name="Questrial" href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" />
<mj-attributes>
<mj-text font-family="Questrial, sans-serif" font-size="16px" color="#353b48" padding="0px" line-height="24px" />
<mj-section padding="0px" />
<mj-image padding="0px" />
<mj-button background-color="#75bac4" font-size="15px" color="#ffffff" font-family="Inter, sans-serif" text-transform="uppercase" border-radius="50px" font-weight="500" />
</mj-attributes>
<mj-style>
@font-face {
font-family: "Malina";
src: local('Malina1'), url("fonts/Malina1.woff2") format("woff2"),
url("fonts/Malina1.woff") format("woff"),
url("fonts/Malina1.ttf") format("truetype"),
url("fonts/Malina1.otf") format("opentype")
}
</mj-style>
</mj-head>
<mj-body width="600px" background-color="#fff">
<!-- 01:logo -->
<mj-section border-top="1px solid #e6e6e6" border-left=" 1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding-top="30px">
<mj-column width="100%">
<mj-image width="540px" src="https://i.imgur.com/y5pjEGu.png" alt="logo" />
</mj-column>
</mj-section>
<!-- middle section 02 -->
<mj-section padding="48px 30px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="100%">
<mj-text align="left" color="#141414">
Hi Jenny,
</mj-text>
<mj-spacer height="8px" />
<mj-text>
Welcome to FreshFeelz
<br><br>
Are you ready to Feel Fresh & start saving $$$ with our Beauty, Health & Wellness Platform?
<br><br>
Our mission is to provide the convenience of being able to search
& shop for all your Health, Beauty & Wellness needs with just a few clicks
at affordable prices.
</mj-text>
<mj-spacer height="60px" />
</mj-column>
</mj-section>
<!-- how it works -->
<mj-section padding="0px 30px 0px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="100%">
<mj-text align="center" font-size="21px" line-height="24px">
FreshFeelz works in 3 simple steps
</mj-text>
<mj-spacer height="30px" />
</mj-column>
</mj-section>
<!-- 3 column features -->
<mj-section border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<!-- step 1 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 1
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Find a deal or product
</mj-text>
</mj-column>
<mj-column width="40px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
</mj-column>
<!-- step 2 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 2
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Select your payment method. We also offer
</mj-text>
<mj-spacer height="10px" />
<mj-image src="https://i.imgur.com/tpQdjo8.png" width="121px" height="25px" />
</mj-column>
<mj-column width="40px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/wnzirMx.png" height="40px" width="40px" />
</mj-column>
<!-- step 3 -->
<mj-column width="160px" vertical-align="top" padding="15px 0">
<mj-image src="https://i.imgur.com/PZYQJcT.png" height="50px" width="50px" />
<mj-spacer height="10px" />
<mj-text font-size='12px' line-height="24px" letter-spacing="2.4px" align="center">
STEP 3
</mj-text>
<mj-spacer height="10px" />
<mj-text align="center">
Get in touch with the business to redeem your deal or enter delivery details.
</mj-text>
<mj-spacer height="60px" />
</mj-column>
</mj-section>
<!-- login details -->
<mj-wrapper padding="0px 30px 60px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-section background-color="#eaeee2" padding="25px 0px">
<mj-column width="38%" vertical-align="middle">
<mj-text align="left" font-size="21px" line-height="30px" letter-spacing="2.1px">
LOGIN DETAILS
</mj-text>
</mj-column>
<mj-column width="50%" vertical-align="middle">
<mj-text>
Email: <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86e7f5b7b5c6fee3e8e3feabebe3e2efe7a8e5e9eba8e7f3" rel="noreferrer noopener nofollow">[email protected]</a>
<br>
</mj-text>
<mj-text>
Password: @xenex1234
</mj-text>
</mj-column>
</mj-section>
</mj-wrapper>
<!-- Get Rewarded -->
<mj-section padding="0px 0px 0px 30px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="51%" vertical-align="middle">
<mj-text font-family="Malina" font-size="40px" line-height="36px" color="#141414">
Get Rewarded
</mj-text>
<mj-spacer height="20px" />
<mj-text>
When a new user registers using your code they will receive $5 credit to use on their first purchase.
</mj-text>
<mj-spacer height="20px" />
<mj-text font-size="21px" line-height="24px" color="#141414" align="center">
<div style="max-width:255px;background-image:url('https://i.imgur.com/aXq47yg.png');background-size: cover;background-position: center;border-radius: 10px;padding:15px 0px;">
You will earn $1
<p style="font-family='Questrial';font-size:16px;line-height:24px;margin:0;">everytime they purchase.</p>
</div>
</mj-text>
<mj-spacer height="20px" />
<mj-text>
<p style="margin:0px 0px 10px 0px;">The more people you tell the more you earn!</p>
<div class="spacer" style="margin-bottom:16px;border-bottom:1px solid #353b48;line-height:6px;height:6px;mso-line-height-rule:exactly;">
</div>
</mj-text>
<mj-text>
<span style="font-family:Questrial;color:#141414;">Referral Code:</span> FFAJV1
</mj-text>
</mj-column>
<mj-column width="49%" vertical-align="middle" padding-top="30px">
<mj-image src="https://i.imgur.com/zaas7HS.png" width="300px" />
</mj-column>
</mj-section>
<!-- introductory offer -->
<mj-section border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6" padding="60px 30px">
<mj-column width="100%">
<mj-image src="https://i.imgur.com/aSyFabQ.png" width="60px" height="60px" />
<mj-spacer height="10px" />
<mj-text align="center" font-size="36px" line-height="36px" color="#141414">
Introductory Offer
</mj-text>
<mj-spacer height="20px" />
<mj-text align="center" font-size="18px" line-height="30px">
Reply to this email with “I’m feeling Fresh” to receive
$10 credits towards your first purchase.
</mj-text>
</mj-column>
</mj-section>
<!-- download the app -->
<mj-section padding="0px 0px 60px 0px" border-left="1px solid #e6e6e6" border-right="1px solid #e6e6e6">
<mj-column width="255px" vertical-align="middle" padding="0px 15px 0px 0px ">
<mj-image src="https://i.imgur.com/nvgV3kv.png" width="255px" />
</mj-column>
<mj-column width="263px" vertical-align="middle" padding="15px">
<mj-text font-size="18px" line-height="30px">
Stay up-to-date with your
FreshFeelz bookings
</mj-text>
<mj-spacer height="10px" />
<mj-text>
Our app lets you discover new deals,
make bookings and earn rewards.
</mj-text>
<mj-spacer height="20px" />
<mj-text align="left">
<!-- appstore -->
<a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/xVnQerH.png" width="115" style="height:35px" height="35" /></a>
<!-- google play -->
<a href="#" style="text-decoration: none;display:inline-block;height:35px;"><img src="https://i.imgur.com/Zk4J2eA.png" width="105" height="35" style="height:35px;" /></a>
</mj-text>
</mj-column>
</mj-section>
<!-- 03:footer Main -->
<mj-section padding="30px 15px" background-color="#ebe5d6">
<mj-column width="75%" vertical-align="middle">
<mj-text>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Help Center
</a>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Privacy Policy
</a>
<a href="#" style="margin:0 10px;text-decoration: none;display:inline-block;color:#353b48">
Terms & Conditions
</a>
</mj-text>
</mj-column>
<mj-column width="25%" vertical-align="middle">
<mj-text>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/ssftYug.png" width="32" height="32" style="height:32px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;margin:0px 0px 0px 5px"><img src="https://i.imgur.com/vRERJBi.png" width="36" height="36" style="height:36px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/Eu54USu.png" width="41" height="41" style="vertical-align:text-bottom;height:41px;" /></a>
</mj-text>
</mj-column>
</mj-section>
<!-- footer Secondary -->
<mj-section background-color="#92a294" padding="18px 0">
<mj-column width="100%">
<mj-text align="center" color="#fff">
<a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1078757c7c7f5076627563787675757c6a3e737f7d3e7165" rel="noreferrer noopener nofollow">[email protected]</a></a> |
<a href="#" style="text-decoration: none;display:inline-block;color:#fff;">
www.freshfeelz.com.au</a> </a>
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml> 
最佳答案
当您在父级别设置行高时，通常会发生这种情况。在您的情况下，您在 div 级别有一个行高(代码编译后)。看来<mj-text>默认情况下，行高为 16px。
作为解决方法，您可以在 mj-text 添加行高属性。元素如下:
<mj-text line-height="32px">
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/ssftYug.png" width="32" height="32" style="height:32px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;margin:0px 0px 0px 5px"><img src="https://i.imgur.com/vRERJBi.png" width="36" height="36" style="height:36px;" /></a>
<a href="#" style="text-decoration: none;display:inline-block;"><img src="https://i.imgur.com/Eu54USu.png" width="41" height="41" style="vertical-align:text-bottom;height:41px;" /></a>
</mj-text>
您还可以使用 line-height="auto"，但即使代码输出工作正常，实时代码编辑器也会抛出错误。
关于outlook - 为什么用mjml制作的邮件模板outlook会截掉一些图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73688754/