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

问题描述 投票：0回答：1

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

我正在尝试使用 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}@" target="_blank" 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" target="_blank"><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/" target="_blank" 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." target="_blank" 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" target="_blank" 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}@" target="_blank" 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" target="_blank"><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/" target="_blank" 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." target="_blank" 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" target="_blank" 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 responsive-design media-queries html-email email-client
1个回答
0
投票

提供的代码没有任何

<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}@" target="_blank" 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" target="_blank"><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/" target="_blank" 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." target="_blank" 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" target="_blank" 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>
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" target="_blank"><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/" target="_blank" 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." target="_blank" 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" target="_blank" style="color:#d92027">Continue Reading &rarr;</a></strong></th>
        </tr>
      </table>
  • 为每个 
    td
    添加了 
    th
    样式。这样做是因为 
    font-weight:normal;padding:0px;margin:0px;text-align:left;
    默认情况下具有较粗的字体粗细，并且文本始终居中。如果电子邮件客户端添加了自己的代码，则添加边距和填充只是为了安全
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.