iOS新版本中Table CSS列重叠问题技术求助

问题说明 #

基于Flex实现的响应式卡片布局，在多数设备上可正常按每行2/3/4列展示，但iOS新版本浏览器中出现列重叠现象。关联CSS代码如下：

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    border-collapse: separate;
    border-spacing: 10px;
}
.product {
    width: calc(50% - 5px);
    text-align: center;
    padding: 3px 3px 20px;

    @include tablet {
        width: calc(33% - 5px);
    }
    
    @include desktop {
        width: calc(25% - 5px);
    }
}

正常展示效果：
iOS异常效果：

修复方案 #

1. 清理Flex容器上的无效属性 #

border-collapse和border-spacing是表格专属属性，作用在flex容器上完全无效，反而可能干扰iOS的布局计算逻辑，直接移除。同时用Flex原生的gap属性实现卡片间隙，兼容性更可靠：

.cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px; /* 替代border-spacing实现间隙 */
}

2. 优化卡片宽度计算，避免精度问题 #

iOS浏览器对calc计算后的小数宽度处理存在偏差，改用flex-basis配合flex-shrink: 0固定卡片宽度，同时调整间隙计算逻辑：

.product {
    flex: 0 0 calc(50% - 5px); /* 禁止缩放，固定基础宽度 */
    text-align: center;
    padding: 3px 3px 20px;

    @include tablet {
        flex: 0 0 calc(33.333% - 6.666px); /* 用33.333%替代33%，提升精度 */
    }
    
    @include desktop {
        flex: 0 0 calc(25% - 7.5px); /* 每行4列时，减去1/4的gap值 */
    }
}

如果使用CSS变量管理间隙，计算会更灵活：

.cards-container {
    --gap: 10px;
    gap: var(--gap);
}
.product {
    flex: 0 0 calc(50% - var(--gap)/2);
    /* 断点处同理调整 */
}

3. 添加最小宽度兜底 #

为防止极端窄屏（如小尺寸iOS设备横屏）下卡片被强制压缩，给卡片设置合理的最小宽度：

.product {
    /* ...其他样式 */
    min-width: 160px; /* 根据实际卡片内容调整 */
}

4. 可选：兼容旧版iOS前缀 #

如果需要兼容iOS 10及以下版本，可添加-webkit前缀：

.cards-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    gap: 10px;
}

验证建议 #

优先尝试清理无效属性+gap替代间隙+flex-basis固定宽度的组合方案，这是最贴合Flex布局规范、解决iOS精度问题的有效方式。

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