Outlook Web App "display: none" nie działa

Question

Projektuję responsywny szablon wiadomości e-mail i mam niewielki problem w aplikacji internetowej Outlook. I okazało się, że usuwa klas, więc nie ma sensu przy użyciu zapytań multimedialnych więc staram się ukryć element tr takiego:

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

Ale to wciąż butów w górę. Jakieś pomysły?

Answer 1

Możesz dodać

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

Jednak to tylko sprawia, że ​​nie widać ... To wciąż tam i zajmowania miejsca

Answer 2

Blockquote

jestem nie do końca pewny sposób, w jaki potrzebujesz ukrytego wiersza tabeli, ale spróbuj tego:

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

Może to nie działać, ponieważ klienci poczty e-mail usuwają niektóre arkusze stylów CSS, szczególnie linie, które ukryją kod. Usunie również wszelkie linki do js lub kodu zewnętrznego. Więc, ważne również prawdopodobnie zostaną zignorowane.

Próbowanie ukryć zawartość jest ogromną czerwoną flagą dla filtrów antyspamowych, prawdopodobnie to, co wyślesz, skończy się w spamboksie.

Answer 3

Używamy kombinacji tabel do ukrywania i pokazywania różnych treści. W zależności od rozmiaru obrazu można dostosować wysokość i szerokość td.

Style:

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

miałem ten sam problem cały dzień wczoraj znalazłem na to pytanie wydaje się tutaj i nie poprawną odpowiedź. Następnie przeszukałem forum społeczności Litmus. I na szczęście zobaczyłem komentarz:

Należy również pamiętać przy mso-hide: all, że jeśli próbujesz ukryć zawartość w komórce tabeli, która zawiera tabele zagnieżdżone, musisz zastosować tę właściwość do wszystkich tabel zagnieżdżonych jako dobrze.

Dodałem więc mso-hide: wszystko do wszystkich tabel podrzędnych, i zadziałało!

Answer 5

Owiń wszystko, czego potrzebujesz, aby ukryć element div.

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

Answer 6

Zastosowanie takich klasa:

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