表格文本在iOS邮箱中运行在单元格外

我遇到了一个问题，即iOS邮件正在增加文本大小，将它驱动到表格单元格之外。该表在桌面展望/网络邮件上呈现良好，但在邮件应用上失败。我尝试过添加文字包装，但这并没有影响到它。是将文本调整为框大小还是框调整为文本大小？谢谢！表格文本在iOS邮箱中运行在单元格外

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<body> 
 
     <!-- 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; 
 
      height: 100% !important; 
 
      width: 100% !important; 
 
     } 
 
     
 
     /* What it does: Stops email clients resizing small text. */ 
 
     * { 
 
      -ms-text-size-adjust: 100%; 
 
      -webkit-text-size-adjust: 100%; 
 
     } 
 
     
 
     /* What is 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; 
 
      overflow-wrap: break-word; 
 
       word-wrap: break-word;  } 
 
       
 
     /* 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; 
 
     } 
 
     .counter { 
 
     font-size: 40px; 
 
     line-height: 40px; 
 
     font-weight: 400; 
 
     color: #73879C; 
 
     border-left: 2pxsolid#ADB2B5; 
 
     float: left; 
 
     
 
     } 
 
     .subcounter { 
 
     font-size: 10px;font-weight: 300; 
 
     border-left: 2pxsolid#ADB2B5; 
 
     float: left;   
 
     } 
 

 
     }    
 
    </style> 
 
    
 

 
      <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""> 
 
       <tr> 
 
        <td style="padding: 20px 0; text-align: center; height="75" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
         <br><br><div class="counter">99,999,999</div> 
 
         <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""> 
 
          <tr> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% WoW 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% MoM 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% YoY 
 
           </td>       
 
          </td> 
 
         </table> 
 
        <td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
         <br><br><div class="counter">99,999,999</div> 
 
         <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""> 
 
          <tr> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% WoW 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% MoM 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% YoY 
 
           </td>       
 
          </td> 
 
         </table> 
 
        </td> 
 
        <td style="padding: 20px 0; text-align: center; height="50" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
         <br><br><div class="counter">99,999,999</div> 
 
         <table role="presentation" cellspacing="0" cellpadding="0" align="left" width="100%" style=""> 
 
          <tr> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% WoW 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% MoM 
 
           </td> 
 
           <td style="padding: 5px 0; text-align: center; height="25" alt="alt_text" border="0" bgcolor="#dddddd" color: "#555555"> 
 
            <div class="subcounter">&#8964; 10% YoY 
 
           </td>       
 
          </td> 
 
         </table> 
 
        </td>      
 
       </tr> 
 
      </table> 
 
</body></html>

来源

2016-11-23 econgineer

望着这里提供的代码，似乎有很多的问题与表格上的内联样式。样式属性没有关闭“，颜色也不在样式中，我不知道Zurb在处理时是否照顾它，但这可能会导致渲染问题。还有很多失踪关闭标签每个subcounter divs和一些关闭td而不是tr – Gwesolo

，我不得不删除该表中的CSS：

table-layout: fixed !important;

来源

2016-11-24 00:19:30 econgineer

嘿，这真棒！我至少看到Cerberus电子邮件模板的一部分（我维护该项目），所以我会在这里记录下它会再次出现 –

谢谢！模板很棒btw！它帮助我学习了很多东西，因为我将它们制作成一些Python模块来生成子节点。 – econgineer

太棒了！总是很高兴听到这样的事情！ –

表格文本在iOS邮箱中运行在单元格外

回答

相关问题