Outlook Web App «display: none» не работает

Question

Я разрабатываю отзывчивый шаблон электронной почты, и у меня небольшая проблема с Outlook Web-приложением. я узнал, что он удаляет классы, так что нет смысла в использовании медиа-запросов, так что я пытаюсь скрыть тр элемент вроде этого:

<tr style="mso-hide:all; 
      display:none; 
      height:0; 
      width:0px; 
      max-height:0px; 
      overflow:hidden; 
      line-height:0px; 
      float:left;"> 

Но она по-прежнему обувь вверх. Есть идеи?

Answer 1

Вы можете добавить

<tr style="visibility: hidden"></tr> 

Однако, это только делает его не видно ... Это все еще там, и занимает пространство

Answer 2

Blockquote

Я не совсем уверен, что вам нужен скрытый стол, но попробуйте это:

<tr style="mso-hide:all; 
     display:none!important; 
     height:0; 
     width:0px; 
     max-height:0px; 
     overflow:hidden; 
     line-height:0px; 
     float:left;"> 

Это может не работать, поскольку почтовые клиенты удаляют некоторые из CSS, особенно строки, которые будут скрывать код. Он также удалит любые ссылки на js или внешний код. Так что, важно, вероятно, тоже будет проигнорировано.

Наконец, попытка скрыть контент - это огромный красный флаг для фильтров спама, скорее всего, все, что вы отправляете с этим, закончится спамбокс.

Answer 3

Мы используем комбинацию таблиц для скрытия и отображения различного контента. В зависимости от размера изображения вы можете настроить высоту и ширину td.

Стили:

td.inner { display:none; } 
table.promo_1_pic_1 { float: none; width:100%; height:95px; } 
table.promo_1_pic_1 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_2_pic_2 { float: none; width:100%; height:95px; } 
table.promo_2_pic_2 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_3_pic_3 { float: none; width:100%; height:109px; } 
table.promo_3_pic_3 td { background: #fff url(test.jpg) no-repeat 0px !important; } 
table.promo_4_pic_4 { float: none; width:100%; height:109px; } 
table.promo_4_pic_4 td { background: #fff url(test.jpg) no-repeat 0px !important; } 

HTML:

<td class="desktop-table" bgcolor="#ffffff" style="padding:20px; background-color:#ffffff; font-family: Arial, Helvetica, sans-serif;">   
       <!-- promo 1 content --> 
       <table class="promo_1_pic_1"><tr><td></td></tr></table> 
       <table class="promo_2_pic_2"><tr><td></td></tr></table> 
        <table class="promotion"> 
         <tr> 
          <td class="inner"><a href="#"><img src="test.jpg" alt=""/></a> 
          </td> 
          <td class="inner"><a href="#"><img src="test.jpg" alt=""/></a> 
          </td> 
         </tr> 
        </table> 
      </td> 
<td class="desktop-table" bgcolor="#ffffff" style="padding:0 10px 10px 10px; background-color:#cfe6f6; font-family:Arial, Helvetica, sans-serif;">   
       <!-- promo 1 content --> 
       <h3 style="margin:25px 0px 0px 22px;">You might also be interested in:</h3> 
       <table class="promo_3_pic_3"><tr><td></td></tr></table> 
       <table class="promo_4_pic_4"><tr><td></td></tr></table> 
        <table class="promotion"> 
         <tr> 
          <td class="inner"><a href="#"><img src="test.jpg"></a> 
          </td> 
          <td class="inner"><a href="#"><img src="test.jpg"></a> 
          </td> 
         </tr> 
        </table> 
     </td> 

Answer 4

Я вчера была такая же проблема в течение всего дня, я нашел этот вопрос здесь и кажется, нет правильного ответа. Затем я искал в форуме сообщества Litmus. И, к счастью, заметил комментарий:

Также обратите внимание на mso-hide: все, если вы пытаетесь скрыть содержимое в ячейке таблицы, содержащей вложенные таблицы, вы должны применить это свойство к любым и всем вложенным таблицам внутри Что ж.

Итак, я добавил mso-hide: все для всех детских столов, и это сработало!

Answer 5

Оберните все, что вам нужно, чтобы спрятаться в div.

div { 
    width: 0; 
    height: 0; 
    overflow: hidden; 
} 

Answer 6

Использование такого класса:

.hide { 
    display: none !important; 
    width: 0 !important; 
    height: 0 !important; 
    overflow: hidden !important; 
}