Outlook Web App「display：none」無法正常工作

我正在設計一個響應式電子郵件模板，並且我在Outlook Web App上遇到了一些小問題。我發現，它消除了階級所以在使用媒體查詢是沒有意義的，所以我試圖掩蓋這樣一個tr元素：Outlook Web App「display：none」無法正常工作

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

但它仍然鞋了。有任何想法嗎？

來源

2014-09-22 mathew

你的意思辦公室365爲Outlook Web應用程序或者是outlook.com？ – 2014-09-27 18:50:43

你試圖隱藏的''是否包含子表？如果是這樣，請嘗試將相同的隱藏樣式應用於子表。 – Pebbl 2014-09-27 19:03:01

您可以添加

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

然而，這只是使得它不可見......這是仍然存在，佔用空間

來源

2014-09-22 13:02:30

試過，以及..不工作 – mathew 2014-09-22 13:07:14

塊引用

我不完全確定的方式，你需要一個隱藏的表格行，但試試這個：

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

這可能不起作用，因爲電子郵件客戶端刪除了一些CSS，特別是會隱藏代碼的行。它還會刪除任何指向js或外部代碼的鏈接。所以！重要的可能也會被忽略。

最後試圖隱藏內容對於垃圾郵件過濾器來說是一個巨大的紅旗，可能無論您使用何種方式發送郵件都會在垃圾郵件箱中結束。

來源

2014-09-27 18:44:15 JoeyPhillips

我們使用表格的組合來隱藏和顯示不同的內容。根據圖像的大小，您可以調整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>

來源

2015-06-10 16:08:44 kjw

昨天我有同樣的問題了一整天，我發現這個問題在這裏，似乎沒有正確的答案。然後我在Litmus社區論壇中搜索。幸運的是看到一條評論說：

另請注意，使用mso-hide：all，如果您試圖隱藏包含嵌套表格的表格單元格內的內容，則必須將此屬性應用於任何和所有內嵌的表格中好。

所以我添加了mso-hide：全部給所有的子表，它工作！

來源

2015-07-23 15:04:42

把你需要隱藏在div中的任何東西包起來。

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

來源

2017-09-08 21:23:54

使用這樣的類：

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

來源

2017-12-01 09:01:11

Outlook Web App「display：none」無法正常工作

回答

相關問題