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浏览器中不起作用

回答

相关问题