IE11桌面端SVG三角无法垂直flex-end对齐问题求助

哎，IE11的flex布局坑确实让人头疼！针对你遇到的这个SVG三角形无法在绿色堆叠上方垂直flex-end对齐的问题，结合Bootstrap 3的环境，我整理了几个可行的解决思路：

• 补全IE11兼容的flex属性写法
  IE11对flex布局的支持有不少 quirks，你可以给包含SVG的父容器和SVG元素本身补全兼容写法：

  • 父容器需同时声明：display: -ms-flexbox; display: flex;
  • 将align-items: flex-end;替换为兼容写法，同时给SVG容器单独设置：-ms-align-self: flex-end; align-self: flex-end;
  • 注意给父容器明确设置height或min-height，IE11经常会忽略flex容器的高度继承，导致对齐失效。

• 给SVG设置明确的尺寸
  IE11对未声明宽高的SVG元素处理逻辑很奇怪，你可以给这个三角形SVG指定具体的width和height值（比如width: 22px; height: 16px;），同时添加flex-shrink: 0;防止它被flex布局压缩，这样更容易把控它的位置。

• 用绝对定位作为应急替代方案
  如果flex的路子走不通，结合Bootstrap 3的布局特性，你可以试试：
  给绿色堆叠的容器设置position: relative;，然后给SVG设置position: absolute; bottom: 100%;（可根据需求调整bottom值），再用left: 50%; transform: translateX(-50%);实现水平居中，这种方法在IE11里的兼容性会更稳定。

• 排查Bootstrap 3的默认样式冲突
  Bootstrap 3的部分默认类可能会给元素添加额外的margin、padding或者干扰flex布局的属性，你可以用IE11的F12开发者工具检查SVG和父容器的计算样式，看看是否有属性被意外覆盖——比如是否有float属性破坏了flex布局，或者box-sizing设置导致尺寸计算错误，必要时可以用自定义样式针对性覆盖。

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