inline-table在IE中失效，如何实现弹窗高度自适应？

嘿，我明白你遇到的麻烦了——display:inline-table在Chrome里表现完美，但到了IE就掉链子，弹窗不仅靠左，高度还不对。这是因为IE对inline-table的布局规则支持和Chrome有差异，尤其是结合绝对定位的时候。下面给你几个靠谱的替代方案，既能实现高度自适应，又能兼容IE：

方案一：Flexbox布局（推荐，兼容IE11+） #

Flexbox是现代布局的首选，代码简洁，兼容性也不错，IE11完全支持。我们可以把弹窗容器改成flex容器，直接实现水平垂直居中，弹窗高度自然随内容自适应：

修改后的CSS代码：

* { box-sizing: border-box; }
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  /* 关键：用flex实现居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}
.alert {
  width: 440px;
  background: #ffffff;
  border-bottom: 3px solid #31a3dd;
  border-top: 3px solid #31a3dd;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  -moz-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  padding: 10px;
  /* 高度自动随内容变化 */
  height: auto;
}
.content {
  float: left;
  width: 100%;
  background: #f0f7ff;
  border: 1px solid #e7e7e7;
  padding: 10px;
}

HTML结构不用调整，这样修改后，弹窗会完美居中，高度随内容自动变化，在Chrome和IE11里都能正常工作。

方案二：Table-Cell布局（兼容IE8+） #

如果需要兼容更低版本的IE（比如IE8、IE9），可以用表格布局的方式来实现居中，同样能让高度自适应：

修改后的CSS代码：

* { box-sizing: border-box; }
.popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  /* 把容器改成表格 */
  display: table;
}
/* 新增中间层，作为表格单元格实现居中 */
.popup-inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.alert {
  width: 440px;
  background: #ffffff;
  border-bottom: 3px solid #31a3dd;
  border-top: 3px solid #31a3dd;
  -webkit-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  -moz-box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  box-shadow: 0px 2px 14px 0px rgba(66, 66, 66, 1);
  padding: 10px;
  height: auto;
  /* 让弹窗作为块级元素居中 */
  display: inline-block;
}
.content {
  float: left;
  width: 100%;
  background: #f0f7ff;
  border: 1px solid #e7e7e7;
  padding: 10px;
}

对应的HTML需要添加一个中间层：

<div class="popup">
  <div class="popup-inner">
    <div class="alert">
      <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </div>
  </div>
</div>

这个方案利用表格单元格的vertical-align:middle实现垂直居中，text-align:center配合弹窗的display:inline-block实现水平居中，高度自适应也完全没问题，IE8及以上都能兼容。

为什么原方案在IE里失效？ #

原代码中用display:inline-table结合绝对定位和margin:auto来居中，IE对这种组合的支持不完善：

• inline-table在IE中作为绝对定位元素时，margin:auto的垂直居中规则和Chrome不一致，导致弹窗无法垂直居中；
• IE对inline-table的高度计算逻辑不同，无法正确跟随内容高度自适应；
• inline-table默认是行内元素，IE中没有自动居中的处理，所以弹窗靠左显示。

以上两个方案都避开了这些兼容性问题，能稳定实现你想要的效果~

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