CSS clear：两者都不适用于带有背景图像的表格单元格？答案

【问题标题】：CSS clear:both not working for table cell with a background image?CSS clear：两者都不适用于带有背景图像的表格单元格？
【发布时间】：2013-09-23 14:38:24
【问题描述】：

我正在开发一封电子邮件，并且希望图像仅显示在移动设备上......所以我创建了一个空的<td>，其中包含一个跨度，并将跨度设置为具有背景图像。

问题是，我希望图片占据一整行，而不是紧挨着标题。我尝试了clear:both 和display:block，但我不确定为什么它不起作用。我还尝试将宽度设置为 100%，但这只会让所有事情都失败……有什么建议吗？

http://jsfiddle.net/pEDSn/

.test {
    width: 41px;
    height: 41px;
    background-image: url('http://placehold.it/41x41');
    background-repeat: no-repeat;
    background-size: 41px 41px;
    display: block;
    clear: both !important;
}

【问题讨论】：

标签： html css html-table html-email

【解决方案1】：

由于单行中 3 的排列，表格布局在和 css 上强制执行。

我建议将您的 h1 移到单独的行中。

<tr>
    <td> <!-- first td you are using as a spacer --> </td>
    <td> <span><!-- this is where your image is --></span> </td>
    <td> <!-- last column is here --> </td>
</tr>
<tr>
    <td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>

【讨论】：

【解决方案2】：

我在“test”类中添加了一个空行，它起作用了……检查一下：

<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">

  <td align="left" valign="top">
    <h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
  </td>
</tr>
<tr>
  <td height="25" class="marginResize">
    <!-- spacer -->
  </td>
</tr>

http://jsfiddle.net/pEDSn/2/

【讨论】：

【解决方案3】：

主要电子邮件客户端不支持在此技术中使用background-image。您应该为do not support css in the style tag 的所有客户端内联标记。此外，background-image 确实是 not work in Outlook，除非它在 <body> 标记中。

如果您希望它仅在移动设备上显示图像，您最好使用普通图像标签并使用display:none; 隐藏它，然后在媒体查询中覆盖display:block;。这仍然不适用于 Gmail 等纯内联客户端，但这是更好的方法。

【讨论】：

我没有在帖子中说明这一点，但这张图片只应该出现在 Android 和 iOS 的移动电子邮件客户端上。幸运的是，它们允许使用 CSS3，并且更倾向于使用诸如 background-image 之类的东西