解决跨浏览器兼容性问题：CSS Flexbox布局在IE中的错位BUG

问题描述

当使用Flexbox布局时，在Chrome、Firefox等现代浏览器中一切正常，但在IE 10-11中，常见症状包括：

• 容器内的元素无法正确对齐（例如，justify-content: center; 失效）。
• 尺寸计算错误，导致布局溢出或缩进（例如，一个元素宽度应为$100\%$，但在IE中显示为固定值）。
• 响应式设计崩溃，尤其在flex-wrap属性上。

根本原因：IE对Flexbox规范的支持不完整（仅部分实现CSS Flexible Box Layout Module Level 1）。具体来说，IE忽略了某些属性或使用私有前缀（如-ms-flexbox），导致兼容性问题。例如，在计算元素尺寸时，IE可能错误处理百分比值，公式应为：