Safari 浏览器显示 flex 问题

Question

昨天在 Stack 有一个帖子，有人想要这个描述列表 sn-p：

<dl>
  <dt>term1</dt><dd>defn1</dd>
  <dt>term2</dt><dd>defn2</dd>
  <dt>term3</dt><dd>defn3</dd>
</dl>

要以这种格式显示：

term1 term2 term3
defn1 defn2 defn3

这是我想出的css解决方案：

div {
  width: 50%;
}

dl {
    -ms-flex-direction: row;
    -moz-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;

    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;

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

dt {
    -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
    -moz-flex: 0 0 30%;  

    -webkit-flex: 0 0 30%;          /* Chrome */
    -ms-flex: 0 0 30%;              /* IE 10 */
    flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-ordinal-group: 1;  
    -moz-box-ordinal-group: 1;     
    -ms-flex-order: 1;     
    -webkit-order: 1;  
    order: 1;

}

dd {
    -webkit-box-flex: 0 0 30%;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 0 0 30%;         /* OLD - Firefox 19- */
    -moz-flex: 0 0 30%;

    -webkit-flex: 0 0 30%;          /* Chrome */
    -ms-flex: 0 0 30%;              /* IE 10 */
    flex: 0 0 30%;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

    -webkit-box-ordinal-group: 2;  
    -moz-box-ordinal-group: 2;     
    -ms-flex-order: 2;     
    -webkit-order: 2;  
    order: 2;

    margin-left: 0;
}

我的问题是，我仔细研究过，这个 css 解决方案仅在 Safari 浏览器中不起作用。在 Safari 浏览器检查器中显示旁边有感叹号：flex 和 flex-wrap。有人有什么建议吗？

Answer 1

safari 9.0 6.1 -webkit- 将支持 flex .. 在此处查看参考资料http://www.w3schools.com/cssref/css3_pr_flex.asp 最好使用宽度：30%；而不是弯曲