Flexbox不在Safari 5.1 for Windows上显示

Question

我试图为一个问题创建一个简单的方框，一边是问号，另一边是文字。由于文本是动态的，我希望它们垂直对齐，我尝试使用flexbox。

我已经阅读了old and new syntax，并且我试图用必要的前缀涵盖所有可能的情况（如果可能的话），例如：

  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */

这是一个小提琴http://jsfiddle.net/alkaithil/NW3QZ/5/

但是，我无法在Safari for Windows中看到显示的框（5.1）。

这种布局的任何想法或替代方案？

Answer 1

我们必须了解flex的实际用途。

在这种情况下，您必须将display:table-cell与.question-text p, .question-text span

一起使用

请记住最佳使用flex用于列重新排序

对于您的解决方案，请仔细阅读此代码以及FIDDLE

html,
body {
margin: 0 auto;
padding: 0;
}
body {
background: #222;
font-family: 'HelveticaNeueThin', Helvetica, Arial, sans-serif;
font-size: 62.5%;
position: relative;
}
.slide-wrapper {
text-align: center;
}

.boxed {
background: #314353;
border-color: #1c89e8;
color: #e8e8e8;
border-radius: 0 20px 20px 0;
border-style: solid;
border-width: 1px;
display: inline-block;
font-size: 2.2em;
margin:0px;
}

.question-text {
color: #1c89e8;

margin: 2em auto 0 auto;
max-width: 80%;
text-align: left;
}

.question-text:before,
.question-text:after {
content: "";
display: table;
}
.question-text:after {
clear: both;
}
.question-text p,
.question-text span {
vertical-align:middle;
display:table-cell;
padding: 0.5em;
}

.question-text span {
background: #1c89e8;
color: #FFF;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
font-size: 4em;
}