MailChimp提交按钮CSS样式求助：内边距增大按钮被截断

嘿，我刚好碰到过类似的MailChimp按钮样式问题，给你几个针对性的解决思路，应该能搞定：

一、先解决按钮被截断的核心问题 #

你遇到的截断情况，大概率是两个原因：

1. MailChimp默认给按钮或其父容器加了固定高度或者overflow: hidden属性，导致padding增大后内容超出被裁切；
2. 按钮的box-sizing没设为border-box，此时padding会额外增加元素的总高度，撑破父容器。

修正后的按钮CSS代码 #

直接替换你原来的按钮样式，我帮你做了优化和修复：

#mc_embed_signup .button {
    background-color: #d1e5e6 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    border: none !important;
    /* 修正了原font属性的错误写法，正确顺序是：粗细 字号 字体族 */
    font: bold 16px bebas_neue, Helvetica,Arial,sans-serif !important;
    /* 合并上下左右padding，更简洁，这里把上下设为20px，你可以按需调整 */
    padding: 20px 40px !important;
    /* 关键：让padding包含在按钮自身尺寸内，不会额外撑高 */
    box-sizing: border-box !important;
    /* 避免行高过大导致按钮内部内容偏移或撑高 */
    line-height: 1 !important;
    /* 确保按钮不会被父容器的隐藏规则截断 */
    max-height: none !important;
}

处理父容器的截断限制 #

再给按钮的父div加个样式，确保它不会限制按钮的高度：

/* 针对你那个居中的父div */
#mc_embed_signup div[style*="text-align: center"] {
    height: auto !important;
    overflow: visible !important;
}

二、统一全站按钮尺寸（包括“阅读更多”按钮） #

要让所有按钮样式统一，最好的办法是定义一个通用的按钮类，把所有通用样式写进去，然后给需要统一的按钮都加上这个类：

1. 通用按钮样式 #

.site-unified-button {
    background-color: #d1e5e6 !important;
    color: #000000 !important;
    border-radius: 0 !important;
    border: none !important;
    font: bold 16px bebas_neue, Helvetica,Arial,sans-serif !important;
    padding: 20px 40px !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    /* 确保按钮能正确应用padding和尺寸 */
    display: inline-block !important;
    /* 如果是链接类型的按钮，去掉下划线 */
    text-decoration: none !important;
    /* 可选：加个鼠标悬停效果，提升交互感 */
    transition: background-color 0.3s ease !important;
}

.site-unified-button:hover {
    background-color: #b8d8d9 !important;
}

2. 修改HTML代码 #

• 给MailChimp提交按钮加上这个通用类：

<div style="text-align: center !important;">
    <input type="submit" value="Abonnieren" name="subscribe" id="mc-embedded-subscribe" class="button site-unified-button">
</div>

• 给帖子网格的“阅读更多”按钮也加上这个类（假设原来的代码是这样）：

<!-- 示例，根据你实际的HTML结构调整 -->
<a href="your-post-url" class="read-more-button site-unified-button">阅读更多</a>

小技巧：排查隐藏的默认样式 #

如果还是有问题，打开浏览器的开发者工具（按F12），选中按钮元素，查看右侧的“样式”面板，看看有没有MailChimp默认的height、max-height、overflow属性在搞鬼，直接用!important覆盖掉就行。

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