在IE 10中使用ms-box的垂直中心文本

Question

这是一个在框中垂直居中文本的混合

@mixin box-center(){
/* Firefox */
  display:-moz-box;
  -moz-box-orient:horizontal;
  -moz-box-pack:center;
  -moz-box-align:center;

/* Safari and Chrome */
  display:-webkit-box;
  -webkit-box-orient:horizontal;
  -webkit-box-pack:center;
  -webkit-box-align:center;

  /* IE10 -Doesn't work! */
  display: -ms-box;
  -ms-box-orient:horizontal;
  -ms-box-pack:center;
  -ms-box-align:center;
}

这在Chrome和Firefox中完美运行.

但当然它在IE 10中无法正常工作(我尚未在旧版IE中测试过).文字保持在顶部.

这是一个jsfiddle

我错过了什么吗？

Answer 1

IE10没有实现2009 Flexbox规范,它从2012年3月开始实施草案.

这应该是你需要的:

.foo {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-flex-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-flex-line-pack: center;
  -ms-flex-line-pack: center;
  -webkit-align-content: center;
  align-content: center;
}

我确实为Flexbox提供了一系列Sass mixins,可以为您正确处理所有前缀,您现在可以免费使用:https://gist.github.com/cimmanon/4461470 .它们已经提交给Compass项目,应该可以在下一个版本中使用.