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