I'm running into an issue where iOS Mail is increasing the text size, driving it outside the table cell. The table renders fine on desktop outlook/web mail, but fails on the Mail app. I've tried adding word wrap, but that didn't effect it at all. Is tehre a way to have either the text adjust to the box size or the box adjust to the text size? Thanks!
我遇到了一个问题，iOS Mail正在增加文本大小，将其驱动到表格单元格之外。该表在桌面Outlook / Web邮件上呈现正常，但在Mail应用程序上失败。我试过添加自动换行，但这根本没有影响。是否可以将文本调整为框大小或将框调整为文本大小？谢谢！
<!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">⌄ 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">⌄ 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">⌄ 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">⌄ 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">⌄ 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">⌄ 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">⌄ 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">⌄ 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">⌄ 10% YoY
</td>
</td>
</table>
</td>
</tr>
</table>
</body></html> 1 个解决方案
#1
2
I had to remove this in the table css:
我不得不在表css中删除它：
table-layout: fixed !important;
#1
2
I had to remove this in the table css:
我不得不在表css中删除它：
table-layout: fixed !important;