のSafariブラウザの表示フレックス問題

Question

ポスト誰かが、この記述リストスニペットを望んでいた昨日ここにスタックでありました：

<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のブラウザインスペクタには、表示の隣に感嘆符があります（フレックスとフレックスラップ）。誰にも何か提案はありますか？

Answer 1

フレックスはサファリ9.0でサポートされます - ウェブキット - ..ここで参照を確認してくださいhttp://www.w3schools.com/cssref/css3_pr_flex.asp 幅：30％;フレックスではなく