Question

我正在使用媒体查询编写响应式电子邮件模板，我有一个特定的问题。

我正在使用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>

这仅供参考，这不是我的实际代码，但我希望你明白这一点。

所以我的问题是，在我使用MailChimp的CSS Inliner后，我得到了这个：

     <!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属性有重要性。

我尝试删除内联的重要声明但到目前为止没有任何效果。这里有什么问题，如何绕过它？

Answer 1

根据CSS Specificity的规则：

添加到元素的内联样式（例如，style =＆＃34; font-weight：bold＆＃34;）总是覆盖外部样式表中的任何样式，因此可以被认为具有最高的特异性。

您可以在样式表中使用!important来增加相关样式的特异性，强制它们覆盖内联样式。但是，GMail和其他客户不支持媒体查询和display属性应该是noted。

覆盖响应式电子邮件模板的内嵌代码

1 个答案: