Safari中被截断不是bug，而是其严格遵循多列规范且不自动规避内联元素断裂；修复需三管齐下：display: block使图片进入块流，break-inside: avoid阻止拆分，page-break-inside: avoid补全旧版兼容性缺口。
直接说结论：Safari 中 columns 下图片被截断，不是 bug，而是它严格遵循多列规范但不自动规避内联元素断裂行为；修复核心是让图片脱离“可断流”上下文，同时堵住 Safari 对 break-inside 的兼容性缺口。
为什么 Safari 里 ![]()
Safari（尤其是 iOS 15–16 和 macOS Monterey）对多列中内联级元素的处理更保守：display: inline，浏览器会把它当作“可跨列断开的文本流一部分”，哪怕它视觉上是个完整图形。Chrome 有时会隐式提升为块级行为，但 Safari 不——它真会把一张图从中间切开，塞进下一列顶部。
常见表现包括：
- 图片下半部分消失，只留顶部 1/3 在第二列
- 图片边缘出现锯齿或模糊（因跨列重绘时像素未对齐）
- 加了
display: block后底部空白没了，但截断依旧
必须加的三行 CSS 才能真正阻止截断
仅靠 break-inside: avoid 在 Safari 中大概率无效，必须组合使用以下三项，缺一不可：
-
display: block：让break-inside不生效 -
break-inside: avoid：告诉 Safari “这个块别拆”——但仅对块级盒起作用 -
page-break-inside: avoid：Safari 旧版（≤15.6）仍依赖这个废弃但未移除的前缀属性，漏掉就白加
推荐写法：
.card img {
display: block;
break-inside: avoid;
page-break-inside: avoid;
}
注意：不要只加在 如果图片所在卡片用了 规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持... 此时唯一可靠方案是升维处理： 特别注意：Safari ≤15.4 不支持 即使所有 CSS 都写对了，Safari 仍可能截断图片，原因常藏在看不见的地方： 验证方式：在 Safari 开发者工具中选中图片容器 → 查看「Computed」面板里的 break-inside 应加在那个容器上，否则 Safari 可能仍对父容器做列切分。遇到 Flex/Grid 容器嵌套时，
break-inside 失效怎么办display: flex 或 display: grid，Safari 的多列引擎基本忽略其内部结构，break-inside: avoid 会静默失效——这不是你写错了，是规范限制。
column-span: all，让它跳出分栏流、独占一行（需确保父容器是多列上下文）columns: 1 + grid 布局替代，避开多列机制@supports not (column-span: all) 检测，回退为单列 + scroll-snap 模拟瀑布流column-span，必须搭配 JS 检测并动态插入 wrapper 元素。最容易被忽略的陷阱：父容器高度和缩放干扰
height 或 max-height，且值小于图片自然高度——Safari 会优先保列高，牺牲内容完整性transform: scale() 或 zoom，Safari 会把缩放后的尺寸当作布局依据，但分栏逻辑仍按原始尺寸切分，错位由此产生height 和 column-width 是否为整数 px；若有小数，基本就是截断根源。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
