Firefox浏览器中邮件签名表格TD换行问题求助

我来帮你搞定这个Firefox里的布局bug！先看下问题情况：

Chrome中预览效果完全正常：

但Firefox里第二个<td>会自动换行，出现布局错乱：

你提到这是用于邮件签名的代码，确实邮件客户端的CSS兼容性坑很多，尤其是Firefox对表格样式的处理和Chrome有差异。

问题根源 #

你给内部表格的两个<td>都加了display:inline-block样式，这是导致问题的关键！<td>元素默认的显示方式是display:table-cell，这是表格布局能正常排列的核心属性。强制改成inline-block后，Firefox会把它们当成普通的行内块元素处理，一旦容器宽度计算有偏差就容易换行，而Chrome对这种非标准写法的兼容性更好，所以没出问题。

修复方案 #

直接去掉两个<td>的display:inline-block样式，同时为了更稳妥，给每个<td>明确写上对应的宽度（和里面图片的宽度一致），确保在所有客户端里布局都稳定。修复后的代码如下：

<table width="540" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:0;border-spacing:0;"> 
 <tr> 
 <td width="540" height="157" style="padding:0"><img width="540" src="http://dgntesting.com/ryan/johnmarkham2/img/logo-final.png" height="157" valign="top" style="margin:0;vertical-align:top;padding:0;"></td> 
 </tr> 
 <tr> 
 <td style="padding:0;margin:0;border:0;" width="540"> 
 <table width="540" cellpadding="0" cellspacing="0" style="border-collapse: collapse;border:0;border-spacing:0;"> 
 <tr> 
 <td height="67" width="368" style="padding:0;border-width:0;vertical-align:top;"><a href="https://www.jimsbuildinginspections.com.au/" style="padding:0;text-decoration:none;"><img src="http://dgntesting.com/ryan/johnmarkham2/img/bottom-left.png" width="368" height="67" valign="top" style="margin:0;padding:0;vertical-align:top;"></a></td> 
 <td height="67" width="172" style="padding:0;border-width:0;vertical-align:top;"><a href="tel:131546" style="padding:0;text-decoration:none;"><img src="http://dgntesting.com/ryan/johnmarkham2/img/bottom-right.png" width="172" height="67" valign="top" style="margin:0;padding:0;vertical-align:top;"></a></td> 
 </tr> 
 </table> 
 </td> 
 </tr> 
 </table> 

额外小贴士 #

邮件签名的布局尽量用最基础的表格写法，少用CSS里的特殊布局属性（比如inline-block、flex这些），因为很多邮件客户端（尤其是Outlook系列）对复杂CSS的支持很差，保持简洁的表格结构才能最大化兼容各种平台。

内容的提问来源于stack exchange，提问作者Jasdeep Singh