覆蓋響應電子郵件模板的內聯代碼

我使用媒體查詢編碼響應電子郵件模板，並且遇到特定問題。覆蓋響應電子郵件模板的內聯代碼

我使用MailChimps指南，因此我使用他們CSS Inliner，但我發現一個問題，即內聯CSS莫名其妙地覆蓋，並突破了我的以前的工作中的CSS樣式。

因此，例如，這裏是我說的，這是我沒有內聯代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title></title> 
    <style> 
     #desktop {display: block;} 
     #mobi {display: none !important;} 

     @media only screen and (max-width: 720px) { 
      #desktop {display: none !important} 
      #mobi {display: block !important} 
     } 
    </style> 
</head> 
<body> 
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> 
     <tr> 
      <td align="center" valign="top"> 
       <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer"> 
        <tr> 
         <td align="center" valign="top" id="desktop"> 
          This is where my content goes. 
         </td> 
         <td align="center" valign="top" id="mobi"> 
          This is where my content goes. 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body>

這只是參考，這不是我實際的代碼，但我希望你明白這點。

所以我有這個問題，我使用的CSS內襯後從MailChimp，我得到這個：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <style> 
     #desktop {display: block;} 
     #mobi {display: none !important;} 

     @media only screen and (max-width: 720px) { 
      #desktop {display: none !important} 
      #mobi {display: block !important} 
     } 
    </style> 
</head> 
<body> 
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable"> 
     <tr> 
      <td align="center" valign="top"> 
       <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer"> 
        <tr> 
         <td align="center" valign="top" id="desktop" style="display: block;"> 
          This is where my content goes. 
         </td> 
         <td align="center" valign="top" id="mobi" style="display: none !important;"> 
          This is where my content goes. 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body>

後，我發送測試電子郵件，在郵件客戶端，最重要的Gmail ，一切都是錯誤的，無論是這兩個對象顯示或#mobi之一隱藏在移動設備上，反之亦然。在我的上部CSS在樣式部分重要的聲明是由於#mobi對象將始終可見在Gmail中，除非它對於display：none屬性非常重要。

我試着刪除內聯的重要聲明，但迄今爲止沒有任何工作。這裏有什麼問題，我怎麼能繞過它？

來源

2016-05-13 snkv

據CSS Specificity規則：

內聯樣式添加到元素（例如，樣式=「字體重量：粗體」）始終覆蓋在外部樣式表任何樣式，因此可以被認爲是具有最高的特異性。

您可以在樣式表中使用!important來增加相關樣式的特異性，強制它們覆蓋內聯樣式。但是，它應該是noted GMail和其他客戶端不支持媒體查詢，也不支持display屬性。

來源

2016-05-13 16:15:25 Shaggy

使用display：none！重要隱藏來自GMail的內容。但我仍然不完全確定它不支持媒體查詢，因爲它可以與其中的一些代碼一起工作。 – snkv

覆蓋響應電子郵件模板的內聯代碼

回答

相關問題