Question

我正在测试移动设备上的布局（用于HTML电子邮件）。

我遇到的问题是，将表<td>显示为块的代码在某些电子邮件客户端中不起作用。当我在JSBIN和JSFiddle中测试时，我在同一个浏览器中获得了不同的结果！

有人可以帮助解释为什么<td>正确显示为阻止here in jsFiddle但不here in JSBin？

<style>
@media screen and (max-width:800px){            
  table {
      width: 100% !important;
      border-collapse: collapse;
  }
  table td {
      background: #aaa;
      display: block !important;
      width: auto !important;
  }
}    
</style>
<table cellspacing="0" cellpadding="15" border="0" width="100%">         
    <tr>
        <td valign="top" bgcolor="#f0f0f0">
            ABC ABC ABC ABC ABC                                             
        </td>                                       
        <td valign="top" bgcolor="#f0f0f0">
             CDE CDE CDE CDE CDE
        </td>       
    </tr>
</table>

jsFiddle的结果（display: block有效）：

jsFiddle screenshot

jsBin的结果（display: block失败）：

jsBin screenshot

Answer 1

将<!DOCTYPE html>添加到jsBin修复它。

将TD显示为bock不一致

1 个答案: