html - Flexbox 在 Windows 的 Safari 5.1 上不显示

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+ */

这是一把 fiddle http://jsfiddle.net/alkaithil/NW3QZ/5/

但是，我根本看不到 Windows 版 Safari 中显示的框 (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;
}