使用column-count实现的图片画廊在Safari中布局异常的修复咨询

你使用column-count实现的图片画廊在Chrome及多数浏览器中表现正常，但在Safari里出现了图片容器跨列、仅后半部分显示图片的异常。同时因为画廊是动态生成的，无法用flex给图片分组，也不想用grid（图片宽高比不同，不想出现不均匀间距），可以通过以下CSS修改解决问题：

修复后的CSS代码 #

.image-gallery {
    border: 1px solid red;
    margin: 0;
    padding: 0;
    line-height: 0 !important;
    column-count: 4;
    -webkit-column-count: 4;
}

.image-gallery img {
    display: block;
    width: 100%;
    break-inside: avoid;
    -webkit-break-inside: avoid;
}

关键修复点说明 #

• display: block：将图片转为块级元素，避免inline元素在Safari的column布局中出现排版错位；
• width: 100%：确保图片充满所在列的宽度，防止溢出或显示不全；
• break-inside: avoid（含-webkit-前缀）：强制图片不被拆分到两列，彻底解决容器跨列的核心问题，这是针对Safari的关键兼容处理。

内容的提问来源于stack exchange，提问作者Jon Jampen