0

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

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

有人可以帮助解释为什么在 jsFiddle<td>中正确显示为块，但在 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 截图

结果 jsBin （display: block失败）：

jsBin 截图

4

1 回答 1

0

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

于 2015-05-22T19:11:13.633 回答