HTML 电子邮件未在 Outlook for iOS 中堆叠

HTML Email Not Stacking in Outlook for iOS

提问人：Julia 提问时间：11/16/2023 最后编辑：Julia 更新时间：11/17/2023 访问量：53

问：

我认为自己是电子邮件编码的初学者

我正在尝试使用 CSS 和 @media 查询将我的电子邮件堆叠在 Outlook for iOS 中的移动设备上。我在其他电子邮件客户端中取得了成功，但无法弄清楚为什么它在 Outlook for iOS 中不起作用。

这是我在阅读了各种网站上的多个错误报告和解决方案后已经尝试过的：

  • 将堆叠更改为 不起作用<td><th>
  • 仅使用一个@media查询最大宽度大小不起作用
  • 检查@media查询的格式以添加适当的空格，不起作用
  • 确保结束 } } 由两个括号之间的空格或换行符分隔，不起作用

谁能想到别的办法来尝试？我经常使用的 CSS 类是 container、photo、drop。drop 类是我试图在这里工作的内容，因为它在其他电子邮件客户端中工作得很好。先谢谢你！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
    ReadMsgBody{ width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0 !important;
    padding: 0 !important;
} 
    p { margin: 1em 0; }
    table td {
    border-collapse: collapse;
    color: #4D4E50;
}
    img { outline:0; }
    a img { border:none; }
    p { margin: 1em 0; }
    @-ms-viewport { width: device-width; }
    @media only screen and (max-width: 700px) {
    body .container { width:100% !important; }
    body .footer { width:auto !important; margin-left:0; }
    body .mobile-hidden, body .sideblock-hidden { display:none !important; }
    body .logo { display:block !important; padding:0 !important; }
    body .photo img { width:100% !important; height:auto !important; }
    body .drop { display:block !important; width: 100% !important; }
    body .nav4, body .nav5, body .nav6 { display: none !important; }
    body .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both; }
    }
        </style>
<title>ENR InfoCenter</title>
</head>

<body bgcolor="#ffffff" text="#000000" style="color: #000000; margin: 0px; padding:0px; -webkit-text-size-adjust:none;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr><td style="font-size: 11px; font-family: 'Helvetica', 'Arial', sans-serif; color:#000000;"><p align="center"><a href="@{mv_online_version}@" style="color:#d92027">View this email in your web browser</a></p></td></tr>
<tr><td>
<table width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="container">
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">


<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td class="photo"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/header.jpg" width="620" height="150" alt="ENR InfoCenter"/></td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr></table>



</td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td>

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="font-size: 20px; line-height:24px; font-family: 'Georgia', 'Times New Roman', 'Times', serif; color:#393939;"><em>Technology Use in Construction</em></td></tr>
<tr><td><hr size="1" color="#cccccc" /></td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="180" class="drop" valign="top"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></td>
<td width="15" class="drop"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td>
<td class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;">
<span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
<em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br /><br />

In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br /><br />

While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br /><br />

<strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" style="color:#d92027">Continue Reading &rarr;</a></strong>
</td></tr>
</table>
</td></tr>

</table>
</td></tr>
</table>


</td></tr>
</table>
</td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>






<style type="text/css">
    ReadMsgBody{ width: 100%; }
    .ExternalClass { width: 100%; }
    .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; }
    body {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    margin: 0 !important;
    padding: 0 !important;
} 
    p { margin: 1em 0; }
    table td {
    border-collapse: collapse;
    color: #4D4E50;
}
    img { outline:0; }
    a img { border:none; }
    p { margin: 1em 0; }
    @-ms-viewport { width: device-width; }
    @media only screen and (max-width: 700px) {
    body .container { width:100% !important; }
    body .footer { width:auto !important; margin-left:0; }
    body .mobile-hidden, body .sideblock-hidden { display:none !important; }
    body .logo { display:block !important; padding:0 !important; }
    body .photo img { width:100% !important; height:auto !important; }
    body .drop { display:block !important; width: 100% !important; }
    body .nav4, body .nav5, body .nav6 { display: none !important; }
    body .footerlogo { display:block !important; width: 100% !important; padding-top:15px; float:left; clear:both; }
    }
        </style>


<body bgcolor="#ffffff" text="#000000" style="color: #000000; margin: 0px; padding:0px; -webkit-text-size-adjust:none;">
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ececec">
<tr><td style="font-size: 11px; font-family: 'Helvetica', 'Arial', sans-serif; color:#000000;"><p align="center"><a href="@{mv_online_version}@" style="color:#d92027">View this email in your web browser</a></p></td></tr>
<tr><td>
<table width="650" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="container">
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">


<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td class="photo"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/header.jpg" width="620" height="150" alt="ENR InfoCenter"/></td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr></table>



</td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="15">
<div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div>
</td>
<td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td style="padding-top:20px; padding-bottom:20px;">

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td>

<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr>
<td style="font-size: 20px; line-height:24px; font-family: 'Georgia', 'Times New Roman', 'Times', serif; color:#393939;"><em>Technology Use in Construction</em></td></tr>
<tr><td><hr size="1" color="#cccccc" /></td></tr>
<tr><td>
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
<tr><td width="180" class="drop" valign="top"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></td>
<td width="15" class="drop"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td>
<td class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;">
<span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
<em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br /><br />

In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br /><br />

While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br /><br />

<strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" style="color:#d92027">Continue Reading &rarr;</a></strong>
</td></tr>
</table>
</td></tr>

</table>
</td></tr>
</table>


</td></tr>
</table>
</td>
<td width="15"><div style="font-size:0pt; line-height:0pt; height:10px">
<img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" />
</div></td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Outlook 响应式设计 媒体查询 html-email 电子邮件客户端

评论

1赞 Syfer 11/16/2023
你说的崩溃是指堆栈吗？如果是，那么您将需要以目标为目标来执行此操作。如果您可以添加一个小的可重现代码（样式加表格），那么我们可以帮助找出导致问题的原因。th
1赞 Keerthana Prabhakaran 11/16/2023
您可以添加运行代码片段，如示例所示，以便更好地可视化您的问题和期望。您可以参考以下示例 stackoverflow.com/questions/77491028/...
1赞 Julia 11/16/2023
@Syfer感谢您的回复。是的，堆栈是一个更好的词，谢谢。我在上面添加了更多代码（电子邮件的缩短版本，如果更好，还可以添加为正在运行的代码片段。现在，我已使用容器类定位外部表，包含大照片的表单元格以照片类为目标，下面的堆叠表单元格都以放置类为目标。我确实尝试过用替换并针对它们，但似乎并没有解决问题。tdth
2赞 Julia 11/16/2023
@KeerthanaPrabhakaran感谢您的回复。我已经添加了正在运行的代码片段，感谢您的建议！

答：

0赞 Syfer 11/17/2023 #1

提供的代码没有任何代码，因此这里是您在使用表后使用功能的工作示例，但代码最少。th

@media only screen and (max-width:480px){
    .columns th{
      display:block !important;
      width:100%!important;
    }
  }
<table width="100%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" class="columns">
        <tr>
          <th width="180" class="drop" valign="top" style="font-weight:normal;padding:0px;margin:0px;"><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model"><img src="https://eblast.bnpmedia.com/ENR/IC-Sensera-0923-redo/images/1.jpg" width="180" height="180" alt="Photo of construction workers take a break"/></a></th>
          <th width="15" class="drop" style="font-weight:normal;padding:0px;margin:0px;text-align:left;"><div style="font-size:0pt; line-height:0pt; height:10px"> <img src="https://eblast.bnpmedia.com/Templates/files/empty.gif" width="10" height="10" style="height:10px" alt="" /> </div></th>
          <th class="drop" valign="top" style="font-size: 14px; line-height:20px; font-family: 'Helvetica', 'Arial', sans-serif; color:#545454;font-weight:normal;padding:0px;margin:0px;text-align:left;"><span style="font-size: 22px; line-height:26px; font-family: 'Helvetica', 'Arial', sans-serif; color:#336899;"><strong>The Benefits of the Construction Equipment Rental Model</strong></span><br />
            <em><strong>Construction companies are saving time and money by renting equipment, like forklifts and site cameras, more often.</strong></em><br />
            <br />
            In 2022, <a href="https://www.statista.com/statistics/1224817/reasons-contractors-rented-construction-equipment-us/" style="color:#d92027">62%</a> of contractors rented construction equipment because it provided more flexibility than owning. Specifically, contractors liked that they could return the equipment whenever they wanted with less overhead.<br />
            <br />
            While buying construction equipment can sometimes be more practical than renting, it's not always the best option. In fact, industry experts say that if contractors use a piece of equipment <a href="https://www.constructionbusinessowner.com/equipment/deciding-whether-buy-construction-equipment-or-rent#:~:text=In%20the%20construction%20industry%2C%20a,purchasing%20or%20leasing%20the%20equipment." style="color:#d92027">less than 40% of the time</a>, it's smarter to rent it.<br />
            <br />
            <strong><a href="https://www.enr.com/articles/56953-the-benefits-of-the-construction-equipment-rental-model" style="color:#d92027">Continue Reading &rarr;</a></strong></th>
        </tr>
      </table>

对代码所做的添加：

  • 已添加到表中的类
  • 添加了媒体查询
  • td更改为 for the tableth
  • 样式添加到每个 .这样做是因为默认情况下具有更粗的字体粗细，并且文本始终居中。如果电子邮件客户端添加了自己的代码，则添加边距和填充只是为了安全font-weight:normal;padding:0px;margin:0px;text-align:left;thth

评论

1赞 Julia 11/21/2023
谢谢！这解决了问题。感谢您的帮助！

上一个：查找与内部用户之间的外部地址之间的电子邮件 [已关闭]

下一个：如何在.net c中将.msg文件转换为Exchange.EmailMessage对象#