OpenCart站点添加的CSS代码在Chrome中不生效如何解决

安全阿岳

2026-8-27

问题背景

基于OpenCart 3.0.3.8版本搭建电商站点
为实现轮播图下方图片双列并排展示效果，在stylesheet.css文件末尾追加了如下CSS代码：

@media all and (min-width: 900px) {
    .container-two-columns {
    }
    .columns-two-columns {
       column-count: 2;
       column-gap: 0.3em;
    }
}

该样式在桌面端Firefox、Opera浏览器下运行正常，Chrome浏览器中完全不生效
预期展示效果参考：

故障原因

Chrome使用的Blink内核在CSS多列布局的渲染逻辑上和Firefox、Opera存在已知兼容差异：

多列容器未明确声明块级显示属性与宽度时，Chrome会直接忽略column-count规则
多列容器内的直接子元素如果设置了浮动属性，Chrome不会将内容拆分到多列渲染
OpenCart 3.0默认主题给首页模块容器默认添加了float: left属性，刚好触发上述兼容问题

修复方法

将原有追加的CSS代码替换为以下兼容版本即可：

@media all and (min-width: 900px) {
    .columns-two-columns {
       column-count: 2;
       column-gap: 0.3em;
       width: 100%;
       display: block;
    }
    .columns-two-columns > * {
        /* 兼容Chrome的多列断行规则 */
        -webkit-column-break-inside: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
        /* 覆盖默认主题的浮动属性，避免干扰多列布局 */
        float: none !important;
        width: 100%;
    }
}

替换完成后，在Chrome中按Ctrl+Shift+R强制清理缓存刷新页面即可看到效果。