邮件@media查询中字体大小生效不一致问题求助

在邮件开发过程中，遇到如下问题：为邮件设置的@media查询内字体大小生效情况不一致，部分模块可正常应用该字体大小，部分模块的字体大小设置则被忽略。尝试移除部分p标签的内联样式，但未产生效果；添加!important声明后有一定作用，但仍未彻底解决问题。通过Litmus测试发现，同一模块在不同邮件客户端的表现存在差异，并非所有客户端都会出现同一模块失效的情况。

CSS代码 #

.stack {
         display:block!important;
         width:100%!important;
         max-width:inherit;
         height:auto;
    }
     .stackB {
         max-width:100%!important;
         display:block!important;
         width:100%!important;
         margin: auto;
    }
     .imgStack {
         width:100%!important;
         padding-right:0;
         padding-left:0;
    }
     .mobSp {
         display:block!important;
    }
     .w100p {
         width:100%!important;
         min-width: 350px;
    }
     .imgFull {
         width:100%!important;
         height:auto!important;
    }
     .rPad-0 {
         padding-right:0!important;
    }
     .lPad-0 {
         padding-left:0!important;
    }
     .copy2 {
         padding:0px 10% 0px 10%;
         width:100% 
    }
     .banner {
         width:100%;
         padding-left:20%;
         padding-right:20%;
    }
     .hero{
         width: 90%!important;
    }
     .headline{
         width:92%;
    }
     .oneupimg {
         width: 92%;
    }
     .oneupcopy{
         width: 92%;
    }
     .oneup50{
         width: 92%;
    }
     h2 {
         font-family: 'Arial';
         font-size: 16pt!important;
         color: #002855;
         padding: 0;
         line-height: 16pt!important;
         font-weight: bold;
    }
     h3 {
         font-family: 'Arial';
         font-size: 15pt!important;
         color: #002855;
         padding: 0;
         line-height: 18pt!important;
         font-weight: bold;
    }
     p a {
         color: #1a7ead;
         font-size:12pt!important;
    }
     p {
         font-size: 12pt!important;
    }
}
 @media screen and (max-width:400px){
     .stack {
         display:block!important;
         width:100%!important;
         max-width:inherit;
         height:auto;
    }
     .stackB {
         max-width:100%!important;
         display:block!important;
         width:100%!important;
         margin: auto;
    }
     .imgStack {
         width:100%!important;
         padding-right:0;
         padding-left:0;
    }
     .mobSp {
         display:block!important;
    }
     .w100p {
         width:100%!important;
         min-width: 350px;
    }
     .imgFull {
         width:100%!important;
         height:auto!important;
    }
     .rPad-0 {
         padding-right:0!important;
    }
     .lPad-0 {
         padding-left:0!important;
    }
     .copy2 {
         padding:0px 10% 0px 10%;
         width:100% 
    }
     .banner {
         width:100%;
         padding-left:20%;
         padding-right:20%;
    }
     .hero{
         width: 90%!important;
    }
     .headline{
         width:92%;
    }
     .oneupimg {
         width: 92%;
    }
     .oneupcopy{
         width: 92%;
    }
     .oneup50{
         width: 92%;
    }
     h2 {
         font-family: 'Arial';
         font-size: 16pt!important;
         color: #002855;
         padding: 0;
         line-height: 16pt!important;
         font-weight: bold;
    }
     h3 {
         font-family: 'Arial';
         font-size: 15pt!important;
         color: #002855;
         padding: 0;
         line-height: 18pt!important;
         font-weight: bold;
    }
     p a {
         color: #1a7ead;
         font-size:12pt!important;
    }
     p {
         font-size: 12pt!important;
    }
}
 table {
     border-spacing: 0;
     border: 0;
}
 td {
     padding: 0;
}
 p {
     font-family: 'Arial';
     font-size: 10pt;
     line-height: 12pt;
     color: #63666a;
}
 img {
     border: 0;
}
 h1 {
     font-family: 'Georgia';
     font-size: 20pt;
     color: #002855;
     padding: 0;
     line-height: 20pt;
}
 h2 {
     font-family: 'Arial';
     font-size: 12pt;
     color: #002855;
     padding: 0;
     line-height: 12pt;
     font-weight: bold;
}
 h3 {
     font-family: 'Arial';
     font-size: 14px;
     color: #002855;
     padding: 0;
     line-height: 23px;
     font-weight: bold;
}
 p a {
     color: #1a7ead;
}

正常生效的模块代码 #

<!-- CTA banner module -->
                    <tr>
                        <td>
                            <table width="600" role="presentation" align="center" valign="middle" bgcolor="#002855" style="background-color: #002855; padding: 10px 0px 10px 0px;">
                                <tr>
                                                                <!--[if (gte mso 9) | (IE)]>
                                    <tr height="10px style="border:0;" ></tr>
                                    <! [endif] -->
                                    <td class="banner" width="600px" style="padding: 0px 11% 20px 11%;">
                                        <h1 align="center" style="color:#41b6e6; font-size: 20px; padding-bottom: 0px;">
                                            Breakfast is just the start.
                                        </h1>
                                        <p align="center" style="color: #FFFFFF; padding-bottom: 10px;">Copy copy copy copy copy copy</p>
                                        <center><a rel="noopener" target="_blank" href="URL" style="background-color: #FDC661; font-size: 14px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #002855; display: inline-block; mso-padding-alt: 0;">
                                            <!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
<![endif]-->
                                            <span style="mso-text-raise: 15pt;">Connect to well-being support</span>
                                            <!--[if mso]>
<i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
<![endif]-->
                                        </a></center>
                                    </td>   
                                </tr>
                            </table>
                        </td>
                    </tr>   
                                            <!--[if (gte mso 9) | (IE)]>
                                    <tr height="10px style="border:0;" ></tr>
                                    <! [endif] -->
                <!-- end CTA banner module -->  

失效的模块代码 #

<!-- half image 1-up -->
                <tr>
                        <td>
                            <table class="oneup50" align="center" valign="middle" style="width: 550px; vertical-align: middle; background-color: #FFFFFF; border:0; padding-bottom: 0;" role="presentation" dir="ltr">
                                <tr>
                                    <td class="stackB" style="padding-bottom:0; display: inline-block;">
                                        <table>
                                            <tr>
                                                <td>
                                                    <a href="URL"><img class="imgStack" style="width:287px; border: 0;" src="image" alt="Breakfast sandwich featuring rustic English Muffin and many toppings"></a>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                    <td class="stack" valign="middle" align="center" width="263" style="height:219px; border:0; padding-bottom: 0; display: inline-block; vertical-align: middle!important;">
                                        <table role="presentation" valign="middle" style="border: 0; vertical-align: middle; display:inline-block;">
                                            <tr>
                                                <td valign="middle" style="height: 218px; vertical-align: middle;" height="218">
                                                    <table style="display:inline-block;">
                                                        <tr>
                                                            <td>
                                                            <center>
                                            <h2 style="padding: 0 20% 0 20%; line-height: 12pt; font-weight: bold;">
                                            Make-ahead Breakfast Sandwich
                                            </h2>
                                            <p style="padding: 0 20% 10px 20%; line-height: 12pt;">
                                                A hearty beginning for busy weekday mornings.
                                            </p>
                                            <a rel="noopener" target="_blank" href="URL" style="background-color: #a7a8aa; font-size: 12px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; text-decoration: none; padding: 14px 40px; color: #ffffff; display: inline-block; mso-padding-alt: 0;">
    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%; mso-text-raise: 30pt;">&nbsp;</i>
    <![endif]-->
    <span style="mso-text-raise: 15pt;">See the recipe</span>
    <!--[if mso]>
    <i style="letter-spacing: 25px; mso-font-width: -100%;">&nbsp;</i>
    <![endif]-->
</a>
                                    </center>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>       
                <!-- end half image 1-up -->

恳请各位有相关经验的开发者提供解决思路或方案，感谢！

内容的提问来源于stack exchange，提问作者Nolan B