【发布时间】：2018-06-30 21:54:15
【问题描述】：
我正在使用表格来构建 HTML 电子邮件。
当我以 90% 的缩放比例查看页面时（在 Chrome 上），我的表格看起来不错。但是当我放大到 100% 及以上时，我的表格移动了几个像素，我不知道为什么。
90% 缩放：
100% 缩放（及以上）：
我希望每个td 都有max-height: 286px; max-width:332px; 并设置了为什么，但它仍然超出这些参数，为什么？
<table bgcolor="#0a1219" border="0" cellpadding="0" cellspacing="0" style="max-width:692px;background-color:#0a1219;" width="692">
<tbody>
<tr>
<!------------->
<!-- IMAGE 1 -->
<td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; max-height: 286px; max-width:332px;" valign="bottom">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<!-- IMAGE -->
<td align="right" style="font-family:'Arial',Helvetica,sans-serif;">
<a href="#" target="_blank">
<img alt="Image-1" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/block-1.png" style="display:block;border:0px;font-family:Helvetica,Arial,sans-serif;color:#ffffff" height="284">
</a>
</td>
</tr>
</tbody>
</table>
</td>
<!------------->
<!-- IMAGE 2 -->
<td align="left" style="font-family:Arial,Helvetica,sans-serif;padding-right:22px; max-height: 286px; max-width:332px;" valign="bottom">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<!--ROW 1 IMAGE -->
<tr>
<td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; background-color:#00adf2;">
<img alt="Speech marks" src="https://cdn2.hubspot.net/hubfs/3055391/Inbound/CPD%202017/Email/Newsletter%20%20-%20Customers/speech.png" style="display:block;border:0px;font-family:Arial, Helvetica,sans-serif;color:#ffffff; padding-top: 3px;" width="310">
</td>
</tr>
<!--ROW 1 TEXT -->
<tr>
<td align="center" style="background-color:#00adf2; font-family:Arial;font-size:14px;line-height:20px;color:#fff; text-align: center;">
Faceate volorunt uta quo moditas
<br> et labo. Comnima iorehent hit est
<br> am vit elit volores cimpossime
<br> serchit, oditiis rehenis volor
<br> sequisqui ut late cus. Faceate
<br> volorunt uta quo moditas et labo.
<br> Comnima ioreh.
</td>
</tr>
<tr>
<!--ROW 3 LINE -->
<td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif;padding: 22px;background-color:#00adf2;vertical-align:top;">
<!-- NESTED TABLE -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" style="font-family:'Open Sans',Helvetica,Arial,sans-serif; width: 100%;" width="100%">
<!-- TABLE FOR LINE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#fff" height="3" style="height:4px;width:50px;font-size:0px;" width="50"></td>
</tr>
</tbody>
</table>
<td style="padding-bottom:18px;"></td>
<!-- TABLE FOR LINE END -->
</td>
<!-- LINE END -->
</tr>
</tbody>
</table>
<!-- NESTED TABLE END -->
</td>
</tr>
</tbody>
</table>
</td>
<!-- FIRST ROW CLOSE -->
</tr>
</tbody>
</table>编辑：
当我从文本中删除一行时：
【问题讨论】：
-
当它破坏布局时，尝试从副本中删除一些单词，看看问题是否与行数有关。
-
当我删除一行时，整个 td 都会掉下来。我在问题中添加了一张图片来说明我的意思。
-
你还有一个 padding-top: 3px;在第二张图片
-
@Constantin 啊，是的，我已经删除了它，但现在情况正好相反。男人的形象高于第二个蓝块？
-
不要使用 DIV。类似 2002 年的代码。 max-height 和 max-width 存在严重问题，最好在表格内设置硬宽度/高度。
标签： html css html-table html-email