iPhone 7截图
iPhone 7原生邮件应用程序打破了这些堆叠行，不显示背景图像。这是一个混合构建。该模板在其他所有设备中都显示良好。我在头部和webkit样式中包含了iOS目标，但没有任何工作。是什么原因造成的呢?谢谢。
Here is the full:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width">
<!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Use the latest (edge) version of IE rendering engine -->
<meta name="x-apple-disable-message-reformatting" />
<!-- Disable auto-scale in iOS 10 Mail entirely -->
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark only">
<title>Insertion</title>
<!-- The title tag shows in emwail notifications, like Android 4.4. -->
<!-- Web Font / @font-face : BEGIN -->
<!-- NOTE: If web fonts are not required, lines 10 - 27 can be safely removed. -->
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: Arial, sans-serif !important;
}
</style>
<![endif]-->
<style type="text/css">
:root {
color-scheme: light dark;
supported-color-schemes: light dark;
}
</style>
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. More on that here: http://stylecampaign.com/blog/2015/02/webfont-support-in-email/ -->
<!-- Web Font / @font-face : END -->
<!-- CSS Reset -->
<style>
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html, body {
margin: 0 auto !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Centers email on Android 4.4 */
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: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode: bicubic;
}
/* What it does: A work-around for email clients meddling in triggered links. */
*[x-apple-data-detectors], /* iOS */ .x-gmail-data-detectors, /* Gmail */ .x-gmail-data-detectors *, .aBn {
border-bottom: 0 !important;
cursor: default !important;
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
/* What it does: Prevents Gmail from displaying an download button on large, non-linked images. */
.a6S {
display: none !important;
opacity: 0.01 !important;
}
/* If the above doesn't work, add a .g-img class to any image in question. */
img.g-img + div {
display: none !important;
}
/* What it does: Prevents underlining the button text in Windows 10 */
.button-link {
text-decoration: none !important;
}
.nolink-black a {
text-decoration: none !important;
color: #000 !important;
}
.nolink-grey a {
text-decoration: none !important;
color: #222;/* color: #222 !important; */
}
.mobile-broker {
margin: 0 !important;
}
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
/* Create one of these media queries for each additional viewport size you'd like to fix */
/* Thanks to Eric Lepetit @ericlepetitsf) for help troubleshooting */
@media only screen and (min-device-width: 375px) and (max-device-width: 413px) { /* iPhone 6 and 6+ */
.email-container {
min-width: 375px !important;
}
@media screen and (max-width: 374px) {
.email-container {
min-width: 320px !important;
}
}
</style>
<!-- Progressive Enhancements -->
<style>
@supports not (-ms-high-contrast: none) {
/* What it does: Hover styles for buttons */
.button-td,
.button-a {
transition: all 100ms ease-in;
}
.button-td:hover,
.button-a:hover {
background: #555555 !important;
border-color: #555555 !important;
}
.fullwidth-left{
width: 29% !important;
float: left !important;
text-align: left !important;
}
.fullwidth-right{
width: 70% !important;
float: left !important;
text-align: left !important;
}
/* Media Queries */
@media screen and (max-width: 480px) {
.mobile-broker{
margin: 0 auto !important;
}
/* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */
.fluid {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
.stack-column,
.stack-column-center {
display: block !important;
width: 100% !important;
max-width: 100% !important;
direction: ltr !important;
}
/* And center justify these ones. */
.stack-column-center {
text-align: center !important;
}
/* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */
.center-on-narrow {
text-align: center !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
table.center-on-narrow {
display: inline-block !important;
}
/* What it does: Adjust typography on small screens to improve readability */
.mobile{
width: 90% !important;
display: block !important;
float: none !important;
margin: 0 auto !important;
}
.mobile td, body[data-outlook-cycle] .mobile td{
width: 100% !important;
display: block !important;
float: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
border: none !important;
text-align: center !important;
}
.mobile td.mobile-padding{
width: 80% !important;
padding-top: 30px !important;
padding-bottom: 30px !important;
padding-left: 30px !important;
padding-right: 30px !important;
margin: 0 auto !important;
}
.mobile td.mobile-padding-sm{
width: 80% !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 auto !important;
}
.mobile td.mobile-padding .material{
margin: 0 auto !important;
float: none !important;
}
.two-lines{
display: block !important;
float: none !important;
width: 100% !important;
}
}
@media all and (max-width: 599px) {
td.hero {
text-align: center !important;
width: 100% !important;
background-image: none !important;
background-image: url(' https://via.placeholder.com/268x326.png/eee/fff') !important;
background-size: cover !important;
background-position: top !important;
background-repeat: no-repeat !important;
padding-bottom: 40px !important;
}
.sidebar .small {
max-width: 100% !important;
}
.sidebar .large {
max-width:100% !important;
}
.two-col {text-align: left;}
.footer {
margin-top: 10px;
}
.fullwidth-left, .fullwidth-right{
width: 100% !important;
float: none !important;
text-align: center !important;
}
.mobile{
width: auto !important;
display: inline!important;
float: inherit!important;
}
.mobile td, body[data-outlook-cycle] .mobile td{
float: inherit!important;
border: none;
text-align: left !important;
}
.mobile-center{
text-align: center !important;
}
.mobile-hide{
display: none !important;
}
.mobile-padding{
padding: 30px 20px !important;
}
.mobile-header{
font-size: 23px !important;
line-height: 28px !important;
text-align: left !important;
}
.width52{
width: 52% !important;
border-right: 1px solid #d9d9d9 !important;
padding: 0 20px 0 0 !important;
}
.width48{
width: 48% !important;
}
}
}
.nocenter{
text-align: left !important;
}
.link-blue a{
color: #073a66 !important;
text-decoration: underline !important;
}
</style>
<style>
#MessageViewBody, #MessageWebViewDiv{
width: 100% !important;
max-width:100% !important;
}
#MessageViewBody .email-container, #MessageWebViewDiv .email-container{
width:100% !important;
max-width:100% !important;
}
#MessageViewBody .mobile td.mobile-padding-sm, #MessageWebViewDiv .mobile td.mobile-padding-sm{
width: 80% !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
padding-left: 10px !important;
padding-right: 10px !important;
margin: 0 auto !important;
}
</style>
<style>
@media (prefers-color-scheme: dark) {
/* Custom Dark Mode Background Color */
.darkmode {
background-color: #100E11 !important;
}
.darkmode2 {
background-color: #000000 !important;
}
.darkmode3 {
background-color: #f1f1f1 !important;
}
.outline { border-color: #333333 !important; }
/* Custom Dark Mode Font Colors */
h1, h3, li{
color: #000000 !important;
}
h2, a {
color: #f5f5f5;
}
.dmtext3 {color: #8cd6f2 !important;}
/* Custom Dark Mode Text Link Color */
.dmtext { color: #000000 !important; }
.dmtext2 { color: #f5f5f5 !important; }
.link { color: #00aeef !important; }
.footer a.link{ color: #00aeef !important; }
.footer { color: #f5f5f5 !important; }
}
/*.nolink-grey {color: #8cd6f2 !important;}*/
/* Copy dark mode styles for android support */
/* Custom Dark Mode Background Color */
[data-ogsc] .darkmode {
background-color: #100E11 !important;
}
[data-ogsc] .darkmode2 {
background-color: #000000 !important;
}
/* Custom Dark Mode Font Colors */
[data-ogsc] h1, [data-ogsc] h3, {
color: #000000 !important;
}
[data-ogsc] h2, [data-ogsc] li, [data-ogsc] a {
color: #fdfdfd !important;
}
/* Custom Dark Mode Text Link Color */
[data-ogsc] .link { color: #028383 !important; }
[data-ogsc] .dmtext { color: #000000 !important; }
[data-ogsc] .dmtext3 { color: #8cd6f2 !important; }
[data-ogsc] .footer a.link { color: #fdfdfd !important; }
</style>
<!--correct superscripts in Outlook-->
<!--[if (gte mso 9)|(IE)]>
<style>
sup{font-size:100% !important;}
</style>
<![endif]-->
<!-- What it does: Makes background images in 72ppi Outlook render at correct size. -->
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body class="darkmode" width="100%" bgcolor="#e0e0e0" style="margin: 0; mso-line-height-rule: exactly;">
<center class="darkmode" style="width: 100%; background: #e0e0e0; text-align: left;">
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display: none; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden; mso-hide: all; font-family: Arial, sans-serif;"> </div>
<!-- Visually Hidden Preheader Text : END --> <!--
Set the email width. Defined in two places:
1. max-width for all clients except Desktop Windows Outlook, allowing the email to squish on narrow but never go wider than 680px.
2. MSO tags for Desktop Windows Outlook enforce a 680px width.
Note: The Fluid and Responsive templates have a different width (600px). The hybrid grid is more "fragile", and I've found that 680px is a good width. Change with caution.
-->
<div class="email-container" style="width: 100%; max-width: 680px; margin: auto;"><!--[if mso]>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td width="680">
<![endif]--> <!-- Email Body : BEGIN -->
<table class="email-container" style="width: 100%; max-width: 680px;" border="0" width="680" cellspacing="0" cellpadding="0" align="center">
<!-- HERO : BEGIN -->
<tbody>
<tr>
<td class="darkmode2" style="background: #fff; padding: 40px 35px; border-bottom: 8px solid #073a66;"><img src="https://via.placeholder.com/251x90.png/09f/fff" alt="Hextone" width="251" height="auto" border="0"></td>
</tr>
<tr>
<td class="hero darkmode3" style="text-align: center; background-position: center top !important; background-size: cover !important;" valign="top" height="380" bgcolor="#ffffff" background="https://via.placeholder.com/680x440.png/09f/fff" align="center"><!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 680px; height: 554px;" src="https://materials.proxyvote.com/Approved/IMAGES/20200612/LOGO_434678.JPG" />
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 680px; height: 380px;">
<v:fill opacity="0%" color="#333333" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div><!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center" width="680">
<tr>
<td align="left" valign="middle" width="500">
<![endif]-->
<table style="max-width: 500px;" border="0" width="100%" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td class="dmtext" style="padding-left: 20px;" valign="middle" align="center"><table width="100%">
<tbody>
<tr>
<td style="text-align: center; padding: 40px 0px 15px 0px;" valign="top" align="center"> </td>
</tr>
<tr>
<td align="left"><table width="90%" align="left">
<tbody>
<tr>
<td class="dmtext" style="text-align: left; padding: 0 20px 15px 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #000000;" valign="top"><p style="font-weight: normal; font-size: 18px; line-height: 24px; margin: 0;">{{{CURDTYY}}} |<br>
<span class="dmtext" style="white-space: nowrap;">Your account ending: {{{ACCT}}}</span></p></td>
</tr>
<tr>
<td style="text-align: left; padding: 0 20px 0 20px;" valign="top"><h1 class="dmtext" style="margin: 0; font-family: Arial, sans-serif; font-size: 28px; line-height: 36px; color: #000000; font-weight: bold;">Your Prospectus<br>
Document(s) are<br>
available online as<br>
a result of your recent<br>
transaction(s).</h1></td>
</tr>
<tr>
<td style="text-align: left; padding: 15px 20px 0 20px; font-family: sans-serif; font-size: 15px; line-height: 20px; color: #000000;" valign="top"><p class="dmtext" style="font-weight: bold; font-size: 16px; line-height: 22px; margin: 0;">Please click on the link(s) below<br>
to view your document(s).</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td style="text-align: center; padding: 15px 0px 40px 0px;" valign="top" align="center"> </td>
</tr>
</tbody>
</table></td>
</tr>
<!-- <tr>
<td style="font-size: 30px; line-height: 30px;" height="30"> </td>
</tr> -->
</tbody>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
<!-- HERO : END --> <!-- INTRO : BEGIN -->
<tr>
<td class="darkmode2" bgcolor="#ffffff"><table style="margin: 0 auto; text-align: center;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<!-- <tr>
<td role="presentation"> </td>
</tr> -->
<tr class="container center-text">
<td class="details darkmode2" style="padding: 10px 20px; background-color: #ffffff; font-family: 'Open Sans', Arial, sans-serif;" valign="top"><table border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<!--{|{URLS_LOOP}|}-->
{!if not empty(URLS_LOOP)!} {!each URLS_LOOP!} {! if loop_var.URL != '' and loop_var.URL !} {! if loop_var.CUSIPN == 'INSERT DOCUMENT:'!}
<tr>
<td style="border-bottom: 1px #DEDEDE solid;" valign="middle"><table class="account" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td width="380" valign="middle" height="80"><span class="dmtext3" style="font-size: 18px; color: #073a66;">{{{loop_var.FNDNAME}}}</span></td>
</tr>
</tbody>
</table>
<table class="button" style="margin: 0 auto;" border="0" width="180" cellspacing="0" cellpadding="0" align="">
<tbody>
<tr>
<td width="180" valign="middle" height="80" align="center"><table align="center">
<tbody>
<tr>
<td style="margin: auto; background-color: #073a66; color: #f5f5f5; padding: 5px 10px; width: 150px;" valign="middle" align="center"><a style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; font-weight: 400; text-decoration: none; color: #f5f5f5;" href="{{{loop_var.URL}}}">View Document</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- ***DISPLAY INSERT*** -->{!else!}
<tr>
<td class="darkmode2 dmtext" style="border-bottom: 1px #DEDEDE solid; background-color: #ffffff;" valign="middle"><table class="account" border="0" cellspacing="0" cellpadding="0" align="left">
<tbody>
<tr>
<td width="380" valign="middle" height="80"><span class="dmtext3" style="font-size: 18px; color: #073a66;"> {{{loop_var.FNDNAME}}}</span> <br>
<span class="dmtext2" style="font-size: 14px; color: #303030;">CUSIP: <span class="nolink-grey dmtext3" style="font-size: 14px; text-decoration: none !important; color: #303030;">‌{{{loop_var.CUSIPN}}}‌</span></span></td>
</tr>
</tbody>
</table>
<table class="button" style="margin: 0 auto;" border="0" width="180" cellspacing="0" cellpadding="0" align="">
<tbody>
<tr>
<td width="180" valign="middle" height="80" align="center"><table align="center">
<tbody>
<tr>
<td style="margin: auto; background-color: #073a66; color: #f5f5f5; padding: 5px 10px; width: 150px;" valign="middle" align="center"><a style="font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; font-weight: 400; text-decoration: none; color: #f5f5f5;" href="{{{loop_var.URL}}}">View Prospectus</a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
{!end!} {!end!} {!end!} {!end!} <!--{|{URLS_LOOP}|}-->
</tbody>
</table></td>
</tr>
<tr>
<td> </td>
</tr>
<!-- PROSPECTUS SECTION -->
<tr>
<td class="darkmode" bgcolor="#073a66" style="padding:20px;text-align:left; background-color: #073a66;"><table class="darkmode" style="background-color: #073a66;margin: 0 auto; text-align: center;" border="0" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><div class="spacer" style="line-height:20px;height:20px;mso-line-height-rule:exactly;"> </div>
<div class="sidebar" style="font-size:0;text-align:center;direction:ltr;">
<!--[if mso]>
<table role="presentation" width="100%">
<tr>
<td style="width:100px;padding:10px;text-align:center;" valign="middle" dir="ltr">
<![endif]-->
<div class="small" style="width:100%;max-width:100px;display:inline-block;vertical-align:middle;">
<div style="padding:10px;font-size:14px;line-height:18px;"> <img src="https://materials.proxyvote.com/Approved/IMAGES/20181129/LOGO_377124.PNG" width="80" alt="" style="width:100%;max-width:80px;height:auto;" /> </div>
</div>
<!--[if mso]>
</td>
<td style="width:460px;padding:10px;text-align:center;" valign="middle" dir="ltr">
<![endif]-->
<div class="large" style="width:100%;max-width:460px;display:inline-block;vertical-align:middle;direction:ltr;">
<div style="padding:10px;font-size:16px;line-height:30px;color: #ffffff;text-align: left;">
<h2 style="margin-top:0;margin-bottom:12px;font-family:Arial,sans-serif;font-weight:bold;">Prospectus Document? What's that?</h2>
<p class="dmtext2" style="margin-top:0;margin-bottom:14px;font-family:Arial,sans-serif;font-size: 16px;line-height: 24px;letter-spacing: .5px;">A prospectus document is a legal document that outlines your investor rights and explains the investment strategy of the fund you're invested in.</p>
</div>
</div>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div></td>
</tr>
</tbody>
</table></td>
</tr>
<!-- END SECTION -->
<tr>
<td class="footer darkmode2" style="background-color: #ffffff; padding: 10px 20px; border-bottom: 1px solid #d1d1d1;" valign="top" align="left"><!---
Place your customized legal stuff here-->
<p class="dmtext2" style="font-family: 'Roboto', Arial, sans-serif; font-size: 11px; line-height: 16px; color: #444444;">{{BRPOBOX}}<br />
Please do not respond to this e-mail as this mailbox is not monitored and cannot generate a reply. <br>
</p>
<br></td>
</tr>
<tr>
<td style="background-color: #e0e0e0;"> </td>
</tr>
</tbody>
</table></td>
</tr>
<!-- INTRO : END -->
</tbody>
</table>
<!-- Email Body : END --> <!--[if mso]>
</td>
</tr>
</table>
<![endif]--></div>
</center>
</body>
</html>
我不确定你到底在期待什么，但看起来有些东西不对齐。
运行代码筛选器显示您缺少一个</tr>，这可能是导致此问题的原因。
这部分:
</table></td>
</tbody> <!-- should be </tr></tbody> -->
</table>
<!--[if mso]>
</td>
</table>
<![endif]--></div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]--></td>
</tr>
</table>
</body>
</html>
由于您的代码已经更改，我之前的答案不再相关。
这里有两个问题:1，奇怪的定位;第二，背景图像不工作。
背景图像似乎直到iOS 12才被支持。请参阅https://www.caniemail.com/features/css-background/、https://www.caniemail.com/features/css-background-position/和https://www.caniemail.com/features/css-background-size/。你可以使用所有这些，但是从iOS 12开始支持
我无法测试iOS 11/iPhone 7，所以我不确定发生了什么。是否有任何方法可以张贴结果代码，即从iPhone?