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项目，应该可以在下一个版本中使用。

Answer 2

这对我在IE 10上运行正常。这是fiddle 屏幕截图：http://img189.imageshack.us/img189/9135/eae7aabb6f494aeb8410553.png

display: -ms-flexbox;
-ms-flex-align: center;
-ms-flex-pack: center;
-ms-box-orient:horizontal;

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

2 个答案: