Flexbox CSS不能與Safari一起工作

我有類如下，它在所有瀏覽器上運行良好，但不適用於Safari。Flexbox CSS不能與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瀏覽器的唯一元素可見，這是怪我。

來源

2015-11-17 Jothi Kannan

嘗試position'加上'到（例如'的位置是：相對的;'）。 – Alex

哪個版本的safari和ios？ – Pete

Windows Safari - 5.1.7 –

用適當的前綴更新您的原始代碼。試試這個：

.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支持所有標準的彎曲特性，Safari瀏覽器8歲以上，你將需要使用供應商前綴。

要快速添加所需的所有前綴，請在左側面板中張貼您的CSS：Autoprefixer。

對於Flexbox的瀏覽器支持的詳情請看這裏：http://caniuse.com/#search=flexbox

來源

2015-11-17 12:14:31

Appriciate你的答案@Michael_B，我還沒有看到任何改變;（ –

）你可以發佈一個演示（例如，jsfiddle.net）來展示這個問題嗎？ –

嗨@Michael_B，現在我只是用display：block，然而' webkit-transition'，'-webkit-order'也不起作用 –

嘗試這個 -

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

來源

2015-11-17 14:09:27

不，永不工作;（ –

Flexbox CSS不能與Safari一起工作

回答

相關問題