MAC端按钮CSS样式不生效，Windows端Chrome正常，求技术支持

问题说明 #

Mac端网页按钮的自定义CSS样式未生效，但Windows端Chrome浏览器显示正常，效果对比：

• Mac端显示：
• Windows端显示：

相关代码 #

CSS代码 #

.why-talk-about-us .talk-about-us-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 12px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    font-family: Gotham;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

HTML代码 #

<section class="why-talk-about-us">
    <div class="why-talk-about-us-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-12 col-lg-6 order-2 order-lg-1">
                    <div class="title-nd-text-wrapper">
                        <h4 class="talk-text-wrapper">Why is everyone talking about US?</h4>
                        <div class="talk-text-description">
                            <h5 class="third-section-description">
                                hello world
                            </h5>
                            <div><button class="btn rounded-pill btn-outline-primary talk-about-us-btn">Sign Up for Free</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-12 col-lg-6 order-1 order-lg-2">
                    <div class="fun-feature-img text-center">
                        <img src="images/r-1.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

问题排查与解决办法 #

1. 提升CSS优先级，覆盖Bootstrap默认样式 #

按钮同时使用了Bootstrap的btn、btn-outline-primary类，这些内置样式在Mac端浏览器中优先级可能高于自定义样式，导致被覆盖。

解决：
给自定义选择器增加层级，或者对关键属性使用!important（仅临时验证或必要时用）：

/* 增加父级层级提高优先级 */
.why-talk-about-us .talk-text-description .talk-about-us-btn {
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    display: inline-flex;
    padding: 12px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    font-family: Gotham, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

2. 修复Mac端字体加载问题 #

自定义字体Gotham可能未在Mac端正确加载，导致字体相关样式失效，影响按钮布局。

解决：

• 确保@font-face规则正确配置，字体文件路径无误；
• 添加字体回退，避免字体加载失败时样式混乱：

font-family: Gotham, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

3. 兼容Safari浏览器特定样式 #

Safari对部分CSS属性的解析和Chrome不同，比如默认按钮样式、flex布局的渲染逻辑。

解决：
添加Safari兼容样式，重置默认按钮外观：

.why-talk-about-us .talk-about-us-btn {
    /* 兼容Safari flex布局 */
    display: -webkit-inline-flex;
    display: inline-flex;
    /* 重置Safari默认按钮样式 */
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    /* 原有样式保留 */
    margin-top: 30px;
    border-radius: 50px;
    border: 1px solid #F1666E;
    padding: 12px 20px;
    flex-shrink: 0;
    color: #EB5F6A;
    text-align: right;
    font-family: Gotham, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

4. 清除浏览器缓存 #

Mac端浏览器可能缓存了旧CSS文件，导致新样式未生效。

解决：

• Chrome：按Cmd + Shift + R强制刷新；
• Safari：按Cmd + Option + R强制刷新；
• 或者给CSS文件URL添加版本号（如style.css?v=2），强制浏览器加载最新文件。

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