Question

昨天在Stack有一篇帖子，有人想要这个描述列表片段：

<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中支持

flex 6.1 --webkit- ..在这里查看引用http://www.w3schools.com/cssref/css3_pr_flex.asp 你使用宽度更好：30％;而不是弯曲

Safari浏览器显示flex问题

1 个答案: