CSS清除:两者都不适用于带有背景图像的表格单元格

我正在开发一封电子邮件，并希望图像仅在移动设备上显示......因此，我创建了一个内部带有跨度的空<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;
}

由于单行中有 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>

我在类"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/

主要电子邮件客户端不支持在此技术中使用background-image。您应该在样式标记中为所有不支持 css 的客户端内联标记。此外，background-image在 Outlook 中不起作用，除非它位于 <body> 标记中。

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

相关内容

最新更新

热门标签：