CSS3弹性布局怎么兼容IE（11）？

最新推荐文章于 2026-05-03 10:09:36 发布

原创最新推荐文章于 2026-05-03 10:09:36 发布 · 9.9k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#弹性布局 #ie 11 #兼容

前端专栏收录该内容

9 篇文章

订阅专栏

本文讲述了在使用CSS3弹性布局（Flexbox）时遇到的IE11兼容性问题。作者试图通过设置display: flex实现输入框容器的布局，但在IE11下水平方向未能正确居中。尽管MDN Web文档显示IE11支持Flexbox，但实际效果不理想。尝试添加前缀无效后，作者选择使用绝对定位作为替代解决方案，并欢迎读者分享解决Flexbox在IE11兼容性的方法。

弹性布局（Flexbox）确实为我们构建复杂、灵活的布局带来了很大的便利，但是它的兼容性确实让人很头痛，下面是我遇到的一个问题：

理想效果：

IE11效果：

html大概结构：

<div class="box">
	<div class="input-container">
		<input />
		<div class="tooltip"></div>
	</div>
	<button></button>
</div>

这里大致说一下css，input-container宽高没设死，由input决定，并设置position: relative;相对定位，并采用display: flex;弹性布局。tooltip设置绝对定位，通过top调整垂直位置，由input-container的弹性布局属性设置水平居中（是不是觉得我很作死，为什么不直接用绝对定位就把垂直水平都搞定了。哈哈，一切源于一颗装B+傻B的心，不过，能实际体会一下flexbox带来的问题，我觉得也挺好的）。

结果在chrome下正常，IE11下就成上图那样了，我上MDN Web看了一下，说弹性布局是支持IE11的（下图），但是从上图来看，IE下垂直方向是对的，但是水平方向却不对，说明flexbox还是没被支持，我也尝试着添加了各种前缀，还是不行。