Question

 .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;
  }

它完全适用于Chrome，Mozilla浏览器，但无法在Safari浏览器中使用。

我已经尝试了很多方法，例如-web-kit-flex等，但没有工作。请建议我！

Answer 1

尝试这种风格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;

}

Flex属性在Safari浏览器中不起作用

1 个答案: