iPhone 中的电子邮件有大量空白

Question

我正在创建一份时事通讯，这个三列内容块导致 iPhone 右侧出现大片空白。

我有一个两块列，编码方式完全相同，没有问题。

这是我正在使用的两个类：

 .responsive-td {
     width: 100% !important;
        display: block !important;
        padding: 0 !important;
}
.mobile-padding {
        padding: 3% !important;
  }

这是该块的代码：

<!-- START THREE COLUMN --><table align="center" bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; margin: auto;" width="100%">
 
  <tr>
   <td align="center" valign="top">
    <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="max-width: 600px; width: 100%;">
     
      <tr>
       <td align="center" valign="top">
        <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; text-align: left;">
         <!-- First Column -->
          <tr>
           <td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 9px 0px 18px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 9px 9px 18px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 9px 0px 18px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td><!-- Second Column --><td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 18px 0px 9px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk"  width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 18px 9px 9px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 18px 0px 9px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td><!-- Third Column --><td align="center" bgcolor="#FFFFFF" class="responsive-td" style="width: 33.33%; padding: 0;">
            <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%;">
             
              <tr>
               <td style="width: 100%; padding: 0;">
                <table cellpadding="0" cellspacing="0" role="presentation" style="width: 100%; min-width: 100%;">
                 
                  <tr>
                   <td class="mobile-padding" style="font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 18px; font-weight: normal; line-height: 24px; color: #ffffff; text-align: left; padding: 0px 18px 0px  9px;">
                    <!--[if mso]>
                                                        <a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk"  width="170" style="display: block; margin: auto;"></a>
                                                        <![endif]--><!--[if !mso]><!--><a href="#" style="display: block;"><img alt="This is a placeholder image" src="https://ibb.co/RhRzgZk" style="border: 0; width: 100%; display: block; margin: auto;"></a><!--<![endif]--></td></tr><tr>
                   <td align="left" style="padding: 9px 18px 9px 9px; font-family: sans-serif; color: #000000; font-size: 22px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;" valign="top">
                    <h3 class="mobile-padding" style="font-family: sans-serif; color: #000000; font-size: 27px; font-style: normal; font-weight: 900; line-height: 37.8x; margin-top: 0px; margin-bottom: 0px;">
                     HEADING 3</h3></td></tr><tr>
                   <td align="left" class="mobile-padding" style="padding: 0px 18px 0px 9px; font-family: sans-serif; color: #1F252C; font-size: 18px; font-weight: 400; line-height: 27px;" valign="top">
                    <p class="mobile-padding td-responsive" style="margin-top: 0px; margin-bottom: 0px;">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vulputate, tellus nec elementum interdum, ante justo auctor mi, eu tempus ligula turpis id mi. Vivamus lobortis feugiat pharetra. Pellentesque rutrum leo ipsum, ac mattis enim mattis eu.</p></td></tr></table></td></tr></table></td></tr></table></td></tr></table></td></tr></table><!-- END THREE COLUMN -->

我尝试过创建不同的类，但没有任何效果。

Answer 1

定义图像标签的宽度和高度属性，以确保图像以所需的尺寸显示。这可以防止扭曲和布局问题。

   <table cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <img src="https://example.com/image.jpg" alt="Image" width="600" height="300" style="display:block; width:100%; height:auto;">
        </td>
    </tr>
</table>