Shopify媒体查询中CSS未更新问题求助

我在Shopify上遇到了CSS无法正常生效的异常情况：

我编写的CSS代码：

@media only screen and (max-width: 768px) {
    .faq_content-inner2 {  
     display: block !important;
      
   }
}

但实际生效的代码却变成了空规则：

@media only screen and (max-width: 768px) {
    .faq_content-inner2 {
    }
}

更奇怪的是，在浏览器控制台手动输入相同属性时，属性值会被莫名截断：

@media only screen and (max-width: 768px) {
    .faq_content-inner2 {
        display: block; //手动在控制台输入
        display: b;
    }
}

如果设置display: flex，最终只会显示display: f;

实用排查解决方法 #

• 清理特殊字符：检查代码中的空格，是否混入了全角空格（而非英文半角空格）。Shopify的CSS编译工具对全角字符兼容性差，会直接过滤掉包含异常字符的属性，把所有空格替换为半角后重试。
• 调整CSS写法：暂时移除!important测试，部分主题的CSS校验逻辑会对带!important的属性做严格检查，容易误判；也可以给目标元素新增自定义类名，通过提升选择器权重来实现效果，避免依赖!important。
• 清除缓存：清理浏览器本地缓存，同时在Shopify后台重新发布主题，确保加载的是最新的CSS文件，排除缓存导致的旧代码生效问题。
• 排查第三方工具：如果使用了第三方的CSS压缩、优化工具，这类工具可能存在bug导致属性截断，暂时禁用后测试是否恢复正常。

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