Flexbox не отображается в Safari 5.1 для Windows

Я пытаюсь создать простую рамку для вопроса, с номером вопроса на одной стороне и текстом на другой. Поскольку тексты динамичны, и я хочу, чтобы они были выровнены по вертикали, я пытаюсь использовать flexbox.

Желаемый эффект

Я читал о старом и новом синтаксисе и попытался охватить все возможные сценарии (если это вообще возможно) с необходимыми префиксами, например: 

  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 для Windows (5.1).

Какие-либо идеи или Альтернативы для такого типа компоновки?

1 3
html css flexbox

1 ответ:

Мы должны понимать фактическое использование flex.

В этой ситуации вы должны использовать display:table-cell с .question-text p, .question-text span

Помните, что лучше всего использовать flex для переупорядочивания столбцов

Для вашего решения, пожалуйста, пройдите через этот код, а также скрипку 

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;
}
0