Applicazione Web Outlook "display: none" non funziona

Question

Sto progettando un modello di posta elettronica reattivo e ho un leggero problema nell'app Web di Outlook. ho scoperto che rimuove classi in modo non v'è alcun punto nel usando le media query in modo che io cerco di nascondere un elemento tr come questo:

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

Ma le scarpe ancora in piedi. Qualche idea?

Answer 1

è possibile aggiungere il

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

Tuttavia, questo rende solo non visibile ... E 'ancora lì e occupare spazio

Answer 2

Blockquote

Sono non è del tutto sicuro che abbiate bisogno di una riga di tabella nascosta, ma provate questo:

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

Questo potrebbe non funzionare in quanto i client di posta elettronica rimuovono parte del CSS, specialmente le linee che nascondono il codice. Rimuoverà anche eventuali collegamenti a js o codice esterno. Così importante sarà probabilmente ignorato.

Infine, provare a nascondere il contenuto è un'enorme bandiera rossa per i filtri antispam, probabilmente qualunque cosa tu invii con questo finirà nello spambox.

Answer 3

Utilizziamo una combinazione di tabelle per nascondere e mostrare contenuti diversi. A seconda delle dimensioni dell'immagine è possibile regolare l'altezza e la larghezza del td.

Stili:

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

ho avuto lo stesso problema per tutto il giorno di ieri, ho trovato qui a questa domanda e sembra senza risposta corretta. Poi ho cercato nel forum della comunità di Litmus. E fortunatamente ho visto un commento che diceva:

Nota anche con mso-hide: tutto, se si sta tentando di nascondere il contenuto all'interno della cella della tabella che include tabelle nidificate, è necessario applicare questa proprietà a qualsiasi e tutte le tabelle nidificate all'interno di bene.

Quindi ho aggiunto mso-hide: tutto a tutti i tavoli figlio e ha funzionato!

Answer 5

Avvolgere tutto ciò che è necessario nascondere in un div.

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

Answer 6

Uso tale classe:

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