Outlook Web App "display: none" không hoạt động

Question

Tôi đang thiết kế mẫu email đáp ứng và tôi gặp sự cố nhỏ trên ứng dụng Outlook Web. tôi phát hiện ra rằng nó loại bỏ các lớp học như vậy không có điểm trong việc sử dụng các truy vấn phương tiện truyền thông vì vậy tôi cố gắng giấu một yếu tố tr như thế này:

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

Nhưng nó vẫn giày lên. Bất kỳ ý tưởng?

Answer 1

Bạn có thể thêm

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

Tuy nhiên, điều này chỉ làm cho nó không thể nhìn thấy ... Nó vẫn còn đó và chiếm dung lượng

Answer 2

Blockquote

Tôi không hoàn toàn chắc chắn cách bạn cần một hàng bảng ẩn, nhưng hãy thử điều này:

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

Điều này có thể không hoạt động khi ứng dụng email xóa một số CSS, các dòng đặc biệt sẽ ẩn mã. Nó cũng sẽ loại bỏ bất kỳ liên kết đến js hoặc mã bên ngoài. Vì vậy, quan trọng có lẽ sẽ bị bỏ qua là tốt.

Cuối cùng cố gắng ẩn nội dung là một lá cờ đỏ lớn cho bộ lọc spam, có khả năng mọi thứ bạn gửi cùng với điều này sẽ kết thúc trong hộp thư rác.

Answer 3

Chúng tôi sử dụng kết hợp các bảng để ẩn và hiển thị nội dung khác nhau. Tùy thuộc vào kích thước của hình ảnh bạn có thể điều chỉnh chiều cao và chiều rộng của td.

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

tôi đã cùng một vấn đề cả ngày hôm qua, tôi thấy câu hỏi này ở đây và dường như không có câu trả lời đúng. Sau đó, tôi đã tìm kiếm trong diễn đàn cộng đồng Litmus. Và may mắn thay, thấy một bình luận nói rằng:

Cũng lưu ý với mso-hide: tất cả, nếu bạn đang cố giấu nội dung trong ô bảng bao gồm bảng lồng nhau, bạn phải áp dụng thuộc tính này cho bất kỳ và tất cả các bảng lồng nhau trong tốt.

Vì vậy, tôi đã thêm mso-hide: tất cả cho tất cả các bảng con và hoạt động!

Answer 5

Quấn bất kỳ thứ gì bạn cần ẩn trong div.

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

Answer 6

Sử dụng lớp như:

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