html - Flexbox CSS 不适用于 Safari

Question

我的类(class)如下，它在所有浏览器上运行良好，但不适用于 Safari。

.video-js .vjs-progress-control {
    -moz-box-ordinal-group: 2;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    order: 1;
    transition: all 0.4s ease 0s;
    top: 0;
}

当我在 safari 中检查此类时，我只能看到 top:0; 是 safari 中唯一可见的元素，这对我来说很奇怪。

Answer 1

使用正确的前缀更新您的原始代码。试试这个:

.video-js .vjs-progress-control {
    -moz-box-ordinal-group: 2;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
        -ms-flex-order: 1;
            order: 1;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    top: 0;
}

尽管 Safari 9 支持所有标准 Flex 属性，但在 Safari 8 及更早版本中，您需要使用供应商前缀。

要快速添加所需的所有前缀，请将 CSS 发布到此处的左侧面板中:Autoprefixer .

有关 Flexbox 浏览器支持的详细信息，请参阅此处:http://caniuse.com/#search=flexbox