html - dotmailer 3 列简易编辑器的移动堆叠 - 在 iphone 上不起作用

Question

我正在使用 Dotmailer 的简单编辑器来创建一个响应式模板，一切进展顺利，直到我找到需要堆叠的 3 列元素。它只是拒绝在 iPhone 上正确呈现!代码如下，请出主意!

<table class="ee_element ee_borders ee_contains_bdr" style="table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="600"><tbody><tr><td class="ee_pad ee_bdr" style="padding: 0px; border-top-color: rgb(29, 44, 112); border-top-width: 4px; border-top-style: solid;"><table class="eebdrtbl" style="table-layout: auto;" cellspacing="0" cellpadding="0"><tbody><tr><td class="eeb_width" style="width: 600px;"><table width="100%" class="ee_spacer eev_element" style="width: 600px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="600" ee-type="element"><tbody><tr><td style="padding: 0px; width: 600px; font-size: 1px;"><img width="10" height="5" style="display: block;" alt="" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table><table width="100%" class="ee_columns ee_element" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns">
  <tbody><tr>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table></td>
    <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- Remember to change the link within the href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium Stretch &amp; Flex Bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p> </div>
          </td>
        </tr>
      </tbody>
      </table></td>
    <td width="8" class="eegap" valign="top" style="padding: 0px; width: 9px;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></td>
    <td width="33%" align="left" class="ee_dropzone ved-scaled-cols" valign="top" style="padding: 0px; width: 194px;"><table width="100%" class="ee_element" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table>

Answer 1

For anybody using the old Dotmailer templates prior to June 2017

Support: Android <4.4 & iOS

以下是针对 Dotmailer 的 3 列 block 的修复。为了让堆叠工作，需要将一些类放在你的 table 上，以便 iOS 可以读取它。

您还将所有电子邮件都需要使电子邮件具有响应能力的元标记

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

我在下面所做的是将 TD 更改为 TH，并向这些 TH 添加类，以便在读取媒体查询时将其分解为行。大约 3 年前，Android 放弃了对 TD 上显示 block 的支持，但仍然读取 TH 上的显示 block 。 TH 的一个缺点是文本是粗体，因此为了迎合这一点，我在 CSS (font-weight) 中添加了文本粗体。

	@media only screen and (max-width:480px) {
		.wrapper{width:100% !important;}
		.ee_element td{text-align:center !important;}
		th.Colms {display:block !important; width:100% !important;}
		.CenteredTable{margin:0 auto;}
	}	

<table width="100%" class="ee_columns ee_element wrapper" style="width: 600px; position: relative; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-edit="columns" data-eewidth="600" ee-type="container" data-title="3 columns">
  <tbody><tr>
    <th width="33%" align="center" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td align="center" style="padding: 0px; width: 194px;" class="hundred">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1633999_20111014_caldene.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px; position: static;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table></th>
    <th width="8" class="eegap Colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th>
    <th width="33%" align="left" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634030_20111014_silverwood.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width CenteredTable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"> <p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"> <!-- Remember to change the link within the href "" --> <a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium Stretch &amp; Flex Bandages</a></p><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p> </div>
          </td>
        </tr>
      </tbody>
      </table></th>
    <th width="8" class="eegap Colms" valign="top" style="padding: 0px; width: 9px;margin:0px;padding:0px; font-weight:normal;"><img width="8" height="10" style="display: block;" src="https://i.emlfiles.com/cmpimg/t/s.gif"></th>
    <th width="33%" align="left" class="ee_dropzone ved-scaled-cols Colms" valign="top" style="padding: 0px; width: 194px;margin:0px;padding:0px; font-weight:normal;"><table width="100%" class="ee_element CenteredTable" style="width: 194px; table-layout: auto;" border="0" cellspacing="0" cellpadding="0" data-eewidth="194" ee-type="element">
      <tbody>
        <tr>
          <td style="padding: 0px; width: 194px;">
            <img width="194" height="194" class="ee_editable vedpw194" style="width: 194px; height: 194px; display: block;" alt="" src="https://scaler.ddglib.com/vedimage/cmpimg/2010/21170/1634013_20111014_headcollars.jpg?w=194&amp;cid=5528741&amp;uid=21170" border="0"></td>
        </tr>
      </tbody>
      </table><table class="ee_element ee_borders eeb_width CenteredTable" style="width: 194px; table-layout: auto;" cellspacing="0" cellpadding="0" data-eewidth="194">
      <tbody>
        <tr>
          <td class="ee_pad" style="padding: 5px; width: auto;">
            <div class="ee_editable eev_element" style="width: 184px;" ee-type="element"><p style="margin: 0px; text-align: center;"><a style="text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">Equilibrium&nbsp;Stretch &amp; Flex Bandages</a></p><div style="font-family: trebuchet ms, helvetica, arial, sans-serif; font-size: 24px;"><p style="margin: 0px; font-family: times, times new roman, serif; font-size: 16px;">&nbsp;&nbsp;&nbsp;</p><p style="margin: 0px; text-align: center; color: rgb(29, 44, 112); line-height: 20px; font-family: times, times new roman, serif; font-size: 16px;"><a style="text-align: center; color: rgb(149, 13, 51); line-height: 20px; font-family: times, times new roman, serif; font-size: 20px; text-decoration: none;" href="http://www.derbyhouse.co.uk/Equestrian/Horse/Horse+Boots++Safety/Bandages+and+Pads/Equilibrium+Stretch++Flex+Bandages_311-0057.htm?utm_source=INSERT_SOURCE_NAME_HERE&utm_medium=email&utm_campaign=INSERT_CAMPAIGN_NAME_HERE">£39.95</a></p></div></div>
          </td>
        </tr>
      </tbody>
      </table>
	  </th>
	  </tr>
	</tbody>
	</table>

如果有任何疑问/问题，请联系我。

干杯