新添加的 CSS 未出现在某些浏览器中（清除缓存、硬重置并确保链接样式表后）

Question

我开始向我的网站添加一个新部分（使用 Firefox），一切看起来都很好。我正在添加到现有的 CSS 文件，但我意识到我添加的新 CSS 没有出现在 Chrome 或 Edge 中。同样，这只是我创建的网站新部分新添加的 CSS。当我更改文件中预先存在的 CSS 时，它就会更改，没问题。

这几乎就像 div 类是错误的，但事实并非如此，它们是匹配的。当我检查浏览器源代码时，我看到 css 文件正在链接并且新的 CSS 代码也在那里，但浏览器只是无法识别它。

我知道这不是服务器或 cloudflare 问题，因为它正在 Firefox 中更新。

就像这些浏览器在一段时间后停止加载代码，因为如前所述，之前输入的所有 css 都在工作，当我更新旧的 CSS 时，它就会显示。

迄今为止采取的行动：

1. 清除浏览器缓存
2. 硬重置
3. 从我的 W3 中清除缓存
4. 更新了所有浏览器
5. 使用“检查 > 源”进行检查，以确保 css 样式表在每个浏览器中正确链接
6. 确保没有班级重叠

这是该部分的 HTML：

 <!-- START OF BLUE COLUMNS -->
        <div class="padded-boxes-parent">
            <div class="padded-boxes">

                <section>
                    <div class="icon"><img src="/wp-content/uploads/2024/04/specification.png"
                            alt="Laser Cutting in Dublin Ireland" /></div>
                    <h3 class="heading">Reliability Assurance</h3>
                    <div class="underline"></div>
                    <div class="services-list">
                        <ul>
                            <li>Made in Ireland</li>
                            <li>ISO 9001 Certified</li>
                            <li>High Quality Steel</li>
                            <li>28 Years in Business</li>
                            <li>Worldwide Customer base</li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div class="icon"><img src="/wp-content/uploads/2024/04/design-white-icon.webp"
                            alt="Laser Cutting in Dublin Ireland" /></div>
                    <h3 class="heading">Our Product Design Benefits</h3>
                    <div class="underline"></div>
                    <div class="services-list">
                        <ul>
                            <li>We offer a designated in-house design team to help bring your vision to life</li>
                            <li>Our in-house designers are experts in all aspects of computer aided design (CAD)</li>
                            <li>2D and 3D on-screen modelling of parts with detailed dimensions, material properties
                                and tolerance</li>
                            <li>Upload existing designs to speed up the design process</li>
                        </ul>
                    </div>
                </section>
                <section>
                    <div class="icon"><img src="/wp-content/uploads/2024/04/Welding-white-icon.webp"
                            alt="Steel manufacturing & Fabrication Services Ireland" /></div>
                    <h3 class="heading">Product Examples</h3>
                    <div class="underline"></div>
                    <div class="services-list">
                        <ul>
                            <li>Gates & Railings</li>
                            <li>Data Centre Cages</li>
                            <li>Trolley Bays</li>
                            <li>Stair Cases</li>
                            <li>Custom Lockers</li>
                            <li>Construction Projects</li>
                            <li>Custom Design Projects</li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
        <!-- End of Parent Padded Box -->
        <!-- END OF BLUE COLUMNS -->

这是CSS：

/* -------------------------------- 

START OF BLUE COLUMNS
----------------------------------------------------*/

/* container */
.padded-boxes-parent
    {   
  width: 100%;
  margin: 0;
  padding: 5px 4% 4% 4%;
  background: #fff;
 display: table;
  height: auto;
  overflow: hidden;
    }
    
.padded-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    padding-top: 30px;
    padding-bottom:50px;
}

/* boxes */
.padded-boxes > section {
    width: 100%;
    background: #0b5eb4;
    border-radius: .4rem;
    text-align: center;
    padding: 1rem;
    color: white;
    list-style-type: none;
    padding-top: 30px;
    padding-bottom: 30px;
}

/* headings */
.padded-boxes .heading {
    margin-top: 0;
    color: #fff;
    padding-top:10px;
    font-weight: bold;
}

/* icons */
.padded-boxes .icon img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 0 auto;
}

/* underline */
.underline {
    width: 50px;
    height: 2px;
    background-color: #fff;
    margin: 10px auto;
}

/* blurb */
.blurb {
    color: #fff;
}

/* tablet breakpoint */
@media (min-width: 768px) {
    .padded-boxes > section {
        width: calc((100% - 4rem) / 3);
}
    
    /* Styling for the divider line */
  .divider {
    border-top: 1px solid #ccc; /* Border color and style */
    margin: 20px 0; /* Margin for spacing */
  }
    
    .boxes-list
    
    {
        color:white;
        list-style-type: none;
    }
    

.services-list
{
    color:#ffff;    
    font-size: 16px;
        
    }

.services-list li
{
    color:#ffff;    
    list-style:none;
    padding-bottom: 25px;
    font-size: 18px;

}
    
    
.services-list ul
{
    color:#ffffff;  
    list-style:none;
    list-style-type: none;
}

    
    .customer-information
    
    {
        text-align: center;
        padding-top: 50px;
    }
.customer-information h2
    {
        color:#0b5eb4;
        font-size: 30px;
    }
    

Answer 1

如果您的服务器有高级选项，您也许可以使用该选项进行硬刷新以清除缓存。问题可能出在缓存上，但如果您在网站上启用了 CDN，禁用它可能会执行 jobs，然后执行硬刷新，然后重试。