Outlook Web App "Anzeige: keine" funktioniert nicht

Question

Ich entwerfe eine responsive E-Mail-Vorlage und ich habe ein kleines Problem mit der Outlook Web App. Ich fand heraus, dass es Klassen entfernt, so gibt es bei der Verwendung Medienanfragen keinen Sinn, so dass ich versuche, ein tr Element wie folgt zu verbergen:

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

Aber es Schuhe noch auf. Irgendwelche Ideen?

Answer 1

Sie können die Add

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

Dies ist jedoch nur macht es nicht sichtbar ... Es ist immer noch da und Raum

Answer 2

Blockquote

Aufnahme

Ich bin nicht ganz sicher, wie Sie eine versteckte Tabellenzeile benötigen, aber versuchen Sie Folgendes:

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

Dies funktioniert möglicherweise nicht, da E-Mail-Clients einige der CSS entfernen, insbesondere Zeilen, die Code verbergen. Es werden auch alle Links zu js oder externem Code entfernt. So wichtig wird wahrscheinlich auch ignoriert.

Schließlich zu verbergen Inhalt ist eine große rote Fahne für Spam-Filter, wahrscheinlich was auch immer Sie senden mit diesem wird in der Spam-Box landen.

Answer 3

Wir verwenden eine Kombination von Tabellen, um verschiedene Inhalte zu verbergen und anzuzeigen. Abhängig von der Größe des Bildes können Sie die Höhe und Breite des td einstellen.

Styles:

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

hatte ich das gleiche Problem gestern den ganzen Tag, ich diese Frage hier gefunden und scheint keine richtige Antwort. Dann habe ich im Litmus Community Forum gesucht. Und zum Glück sah ich einen Kommentar sagen:

Beachten Sie auch mit Mso-ausblenden: alle, wenn Sie versuchen, Inhalt in der Tabellenzelle, die geschachtelte Tabellen enthält verstecken, müssen Sie diese Eigenschaft auf alle geschachtelte Tabellen innerhalb von anwenden Gut.

Also habe ich mso-hide: alle zu allen untergeordneten Tabellen hinzugefügt, und es hat funktioniert!

Answer 5

Wickeln Sie alles, was Sie in einem div verstecken müssen.

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

Answer 6

Verwendung dieser Klasse:

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