IE10 - 使用flexbox在div

Question

这是我到目前为止所得到的：

http://codepen.io/anon/pen/jPQjMZ

HTML：

<div class="container">
  <div class="info">
    This Is Info
  </div>
</div>

<div class="container">
  <div class="info">
    This Is More Info
  </div>
</div>

CSS :(少）

body {
  background: #000;
}

.container {
  background: #eee;
  width: 150px;
  height: 200px;
  display: inline-block;
  vertical-align: top;
}

.info {
  background: #404040;
  color: #fff;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-align-items: center;
  font-size: 1.4em;
  padding: 1em;
  text-align: center;
  height: 20px;
  //overflow: hidden;
}

这在Chrome和Firefox中效果很好。但是在IE10中，文本无法包装：

发生了什么，我该如何解决这个问题？我不一定非必须使用flexbox，但这是我能够弄清楚如何将文本完美地置于div中的唯一方法，无论它是一行还是两行。

Answer 1

如果您将信息文字换成额外的<span>，则可以使用此问题中的双line-height技巧来垂直居中文本（不使用flexbox）：
How do I vertically align something inside a span tag?

注意：我必须删除垂直填充，而是将总高度设置为3em

.info {
  background: #404040;
  color: #fff;
  font-size: 1.4em;

  padding: 0 1em;
  /*height: 3em;*/
  line-height: 3em;
  text-align: center;
}
.info span {
  display: inline-block;
  line-height: 1em;
  vertical-align: middle;
}

更新了笔：http://codepen.io/anon/pen/aOQegy