CSS clear: оба не работают для ячейки таблицы с фоновым изображением?

Я разрабатываю электронную почту и хотел бы, чтобы изображение отображалось только на мобильном устройстве.... Поэтому я создал пустой <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 2
html css html-table html-email

3 ответа:

Из-за расположения 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>
1

Я добавил пустую строку с классом "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/

0

Использование background-image в этом методе не поддерживается среди основных почтовых клиентов. Вы должны встроить тег для всех клиентов, которые не поддерживают css в теге style . Кроме того, background-image не работает в Outlook , если только он не находится в теге<body>.

Если вы хотите, чтобы он показывал изображение только на мобильном устройстве, вам лучше использовать обычный тег изображения и скрыть его с помощью display:none;, а затем в медиа-запросе, переопределив display:block;. Это все равно не будет работать для встроенных клиентов, таких как Gmail, но это лучший способ сделать это.

0