WordPress页脚用自定义HTML小部件嵌入Mailchimp表单width:100%失效怎么办

问题根源 #

你遇到的宽度异常核心是滥用position:absolute属性导致的，同时没有覆盖Mailchimp自带样式对表单元素的宽度限制，也没有给邮箱输入框单独设置宽度规则，具体修复方案如下：

修复思路 #

1. 移除所有不必要的绝对定位规则，绝对定位会让元素脱离正常文档流，百分比宽度的参考基准会变成最近的非静态定位祖先元素，和你预期的父容器宽度完全不一致，这也是按钮只显示60%宽度的直接原因
2. 统一盒模型规则，避免边框、内边距撑大元素宽度导致100%宽度溢出容器
3. 同时给邮箱输入框、订阅按钮设置100%宽度，覆盖Mailchimp默认样式的宽度限制
4. 外层容器保留百分比宽度的同时可设置最大宽度，兼顾大屏适配

修改后完整代码 #

<!-- Begin Mailchimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    /* 统一盒模型 */
    #mc_embed_signup * {
        box-sizing: border-box;
    }
    /* 外层容器，不需要绝对定位 */
    #mc_embed_signup{ 
        width: 80%; 
        max-width: 400px; /* 可根据需求调整最大宽度，不需要可以删掉 */
        margin: 0 auto; /* 容器居中，不需要可以删掉 */
        clear: left;  
        font: 14px Helvetica,Arial,sans-serif; 
    }
    /* 邮箱输入框宽度设置 */
    #mce-EMAIL {
        width: 100% !important;
        margin-bottom: 10px; /* 输入框和按钮的间距，可自行调整 */
    }
    /* 订阅按钮样式，移除绝对定位 */
    #mc-embedded-subscribe {
        width: 100% !important; 
        background-color: #94a6bf !important; 
        margin: 0 !important; /* 覆盖Mailchimp默认边距 */
    }

    /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="KEEPING THIS PRIVATE" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    
    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Email" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_bb6e0bb53d927bf2a775cf919_9a92e414ab" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="SUBSCRIBE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->

补充说明 #

如果替换代码后还有主题样式冲突，可在WordPress后台「外观-自定义-额外CSS」面板添加以下规则，优先级高于小部件内的样式：

#mc_embed_signup #mce-EMAIL,
#mc_embed_signup #mc-embedded-subscribe {
    width: 100% !important;
}

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