min-width: 0在safari（尤其ios 15及更早）中有时不生效，因其对grid/flex子项的解析存在延迟或忽略，嵌套flex或inline元素时仍按min-content计算宽度；需加!important强制覆盖，并配overflow: hidden和text-overflow: ellipsis三者同级生效。
为什么min-width: 0在Safari里有时不生效
Safari（尤其iOS 15及更早版本）对min-width: 0在Grid/Flex子项中的解析存在延迟或忽略，尤其当子项还嵌套了display: flex或inline元素时。它可能仍按min-content计算宽度，导致overflow: hidden和text-overflow: ellipsis失效。
实操建议：
- 显式加
!important：如.grid-item { min-width: 0 !important; }，强制覆盖Safari默认行为 - 避免仅靠
white-space: nowrap——必须同时配overflow: hidden和text-overflow: ellipsis，三者缺一不可 - 若用
word-break: break-all，需在Safari上单独测试：iOS 15.4+已修复，但iOS 14.x仍可能折行失败，可降级为overflow-wrap: break-word - 不要依赖
:deep()穿透在Vue中——Safari对scoped样式+伪类组合解析不稳定，改用全局类或data-v-属性手动匹配
grid-template-columns中1fr vs minmax(0, 1fr)的兼容性差异
1fr在所有浏览器中等价于minmax(auto, 1fr)，而auto在旧版Edge、Safari 13–14里会被解释为min-content，遇到长文本就撑开列宽；minmax(0, 1fr)虽是标准写法，但在IE和部分Android WebView中不被识别，会退化为1fr，失去收缩能力。
实操建议：
- 面向现代浏览器（Chrome ≥90 / Firefox ≥85 / Safari ≥15.4）：直接用
minmax(0, 1fr)，最可靠 - 需兼容Safari 13–14：改用
minmax(min-content, 1fr)+min-width: 0子项双重保险 - 必须支持IE？放弃
fr单位，改用grid-template-columns: 1fr 1fr配合max-width约束子项宽度 - 调试时打开DevTools → Computed → 查看
grid-template-columns实际解析值，确认是否被降级
子项含图片时溢出在Chrome和Firefox表现不同
Chrome默认对<img>应用max-width: none（尤其当父容器是Grid子项且未设width），导致图片撑破列宽；Firefox则倾向尊重width: 100%，但若父项没设min-width: 0，仍可能因盒模型计算偏差溢出。
实操建议：
- 统一加图片约束：
img { max-width: 100%; height: auto; }，且该规则必须作用于真实<img>标签，不能只写在包装容器上 - 若图片在
background-image中，用background-size: contain或cover，并确保容器有明确width和height - 避免用
object-fit替代max-width——部分旧版Firefox不支持object-fit在Grid子项中的渲染 - 检查
box-sizing：确保子项是box-sizing: border-box，否则padding/border会额外占用空间，在Firefox中更易触发溢出
滚动条在Grid容器上不出现，到底是哪层没设overflow
给Grid容器设overflow: auto却没滚动条，不是浏览器差异问题，而是层级错位：滚动行为发生在“有尺寸约束 + 有内容溢出”的那一层，而Grid容器本身常因height: auto无限伸展，根本没触发溢出判定。
实操建议：
- 先限制容器尺寸：
.grid-container { max-height: 400px; }，再加overflow-y: auto - 更推荐把滚动控制下放到具体子项：
.main-content { overflow-y: auto; min-width: 0; height: 300px; }，这样不受Grid轨道影响 - 若用
grid-template-areas，滚动必须加在对应区域的**直接元素**上，比如header区域的DOM节点，而不是.grid-container - 检查
align-content：设为start或flex-start可能导致Grid行高度塌陷，掩盖滚动需求；改用normal或显式grid-auto-rows
minmax(0, 1fr)还是降级方案，同时确保min-width: 0落在真实子项上，而不是被框架封装层吃掉。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
