Flex屬性在Safari瀏覽器中不起作用

.rq-search-container { 
    position: relative; 
    width: 100%; 
    background: white; 
    display: flex; 
    flex-direction: row; 
    align-items: flex-start; 
    border-radius: 2px; 
    z-index: 30; 
    -webkit-flex: 1 0 15em; 
    }

它完全適用於Mozilla瀏覽器，但不適用於Safari瀏覽器。Flex屬性在Safari瀏覽器中不起作用

我已經嘗試過很多辦法像織網-KIT-FLEX等，但不工作。請給我建議！

來源

2017-07-04 Prasanna Raja

試加'顯示：-webkit-FLEX' – duan

供應商前綴的CSS屬性應該寫在標準的css屬性之上。 –

如果你在每天寫CSS，[Autoprefixer（https://github.com/postcss/autoprefixer）是一個必須具備的（用Browserslist配置）。你不必關心這些前綴，也不會被遺忘（或者添加一個不需要的或者從未存在過的），以非功能性的順序編寫，當你不支持的時候必須手動刪除一些（現在的）舊的瀏覽器等需要一些工具，但有一個原因，爲什麼它被這麼多的開發者使用^^ – FelipeAls

嘗試這種風格display:-webkit-flex

類似下面的CSS

display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */

你的代碼中所有的瀏覽器使用

.rq-search-container { 

position: relative; 
width: 100%; 
background: #fff; 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6, BB7 */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: -webkit-flex; /* NEW - Safari 6.1+. iOS 7.1+, BB10 */ 
display: flex;   /* NEW, Spec - Firefox, Chrome, Opera */ 
flex-direction: row; 
align-items: flex-start; 
border-radius: 2px; 
/*box-shadow: 0px 0px 28px 5px rgba(0, 0, 0, 0.3); margin-top: 45px;*/ 
z-index: 30; 

}

來源

2017-07-04 06:21:32

嗨Dinesh，我試過這個代碼，但沒有得到它反映！ –

你可以請發佈更新的樣式？ @PrasannaRaja –

位置：相對; 寬度：100％; background：#fff; display：flex; flex-direction：row; align-items：flex-start; border-radius：2px; z-index：30; -webkit-display：flex; -webkit-flex-direction：row; -webkit-align-items：flex-start; –

Flex屬性在Safari瀏覽器中不起作用

回答

相關問題