justify-self 在 ie 全系（含 ie11）完全不被解析，属静默忽略；flex 中可用 margin: auto 替代，grid 场景需降级为 -ms-flexbox 或 table 布局。
justify-self 在 IE 中根本不会被解析
IE 全系（包括 IE11）完全不支持 justify-self，不是“表现异常”，而是浏览器压根不认识这个属性。你在 DevTools 里看到它被划掉、computed 样式中查不到该字段、甚至控制台都不报错——这就是典型静默忽略。它不属于 IE 的任何 Flex 或 Grid 支持范围，-ms- 前缀也不存在对应版本，Autoprefixer 更不会生成降级代码。
Flex 场景下用 margin: auto 替代最可靠
如果你的父容器是 display: flex，想让某个子项单独水平居中或右对齐，别碰 justify-self，直接用 margin：
-
margin: 0 auto：让单个子项在主轴居中（前提是它没设固定宽度） -
margin-left: auto：推到最右侧，左侧其他子项保持默认左对齐 -
margin-right: auto：推到最左侧（较少用，但语义明确）
注意：margin: auto 在 Flex 中优先级高于 justify-content，且兼容 IE10+，无需前缀，也不依赖父容器尺寸是否固定。
Grid 场景下 IE11 无法 fallback，必须降级为 Flex 或 table
IE11 不支持现代 display: grid，更别说 justify-self。它只认 2011 年草案版的 display: -ms-grid，但该旧语法没有等效的单子项对齐属性。你写 -ms-grid-column-align: center 是无效的——这个属性根本不存在。
实操建议：
- 若布局简单（如单行多列），改用
display: -ms-flexbox+margin: auto组合 - 若需多行+独立对齐，放弃 IE 兼容，或改用
display: table+text-align模拟（仅限文字类内容） - 避免在 IE 环境中混用
@supports (display: grid)判断后写justify-self——IE 不识别@supports对 grid 的检测，会直接跳过整块规则
伪元素 + space-between 是最稳的纯 CSS 替代路径
当你要实现类似 justify-self: end 的效果（比如最后一项右对齐），又不想 JS 控制，可以复用 justify-content: space-between 的视觉逻辑：
给容器加 ::before 和 ::after 伪元素，设为 content: "" + flex: 0 0 0，再配合 justify-content: space-between。这样目标子项自然被“挤”到最右，且兼容 IE9+。
关键点：
- 伪元素必须是
display: block或参与 flex 的元素（默认 inline 不生效） - 不能设宽高，否则干扰间距计算；用
flex-basis: 0更安全 - IE10 需补
-ms-flex: 0 0 0，IE11 可省略
真正难的不是写出替代代码，而是意识到：IE 里没有“单元格内对齐”这个概念。只要还在 Flex 或旧 Grid 里硬套 Grid 思维，就一定会卡在 justify-self 上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
