Làm thế nào để làm cho hộp flex hoạt động trong safari?

Question

Làm thế nào để làm cho hộp flex hoạt động trong safari? Tôi có một điều hướng đáp ứng sử dụng một hộp flex css để đáp ứng và vì lý do nào đó nó sẽ không hoạt động trong safari.

Đây là css của tôi:

#menu { 
clear: both; 
height: auto; 
font-family: Arial, Tahoma, Verdana; 
font-size: 1em; 
/*padding:10px;*/ 
margin: 5px; 
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
display: -ms-flexbox; /* TWEENER - IE 10 */ 
display: -webkit-flex; /* NEW - Chrome */ 
display: flex;   /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
justify-content: center; 
-webkit-box-align: center; 
-webkit-flex-align: center; 
-ms-flex-align: center; 
-webkit-align-items: center; 
align-items: center;fffff 
font-style: normal; 
font-weight: 400px; 
} 

#menu a:link { 
display: inline-block; 
width: 100px; 
height: 50px; 
padding: 5px; 
background-color: yellow; 
/*border: 1px solid #cccccc;*/ 
margin: 5px; 
display: flex; 
flex-grow: 1; 
align-items: center; 
text-align: center; 
justify-content: center; 
font-weight: bold; 
color: #1689D6; 
font-size: 85%; 
} 
#menu a:visited { 
display: inline-block; 
width: 100px; 
height: 50px; 
padding: 5px; 
background-color: yellow; 
/*border: 1px solid #cccccc;*/ 
margin: 5px; 
display: flex; 
flex-grow: 1; 
align-items: center; 
text-align: center; 
justify-content: center; 
font-weight: bold; 
color: #1689D6; 
font-size: 85%; 
} 
#menu a:hover { 
display: inline-block; 
color: #fff; 
width: 100px; 
height: 50px; 
padding: 5px; 
background-color: red; 
/*border: 1px solid #cccccc;*/ 
margin: 5px; 
display: flex; 
flex-grow: 1; 
align-items: center; 
text-align: center; 
justify-content: center; 
font-weight: bold; 
font-size: 85%; 
} 
#menu a:active { 
display: inline-block; 
color: #fff; 
width: 100px; 
height: 50px; 
padding-top: 5px; 
padding-right: 5px; 
padding-left: 5px; 
padding-bottom: 5px; 
background-color: red; 
/*border: 1px solid #cccccc;*/ 
margin: 5px; 
display: flex; 
flex-grow: 1; 
align-items: center; 
text-align: center; 
justify-content: center; 
font-style: normal; 
font-weight: bold; 
font-size: 85%; 
} 

Dưới đây là mã của tôi: http://jsfiddle.net/cyberjo50/n55xh/3/

Có một tiền tố tôi là thiếu để làm cho nó làm việc trong safari?

Answer 1

tôi phải thêm tiền tố webkit cho safari (nhưng flex không flexbox):

display:-webkit-flex

Answer 2

# try this # 
select{ display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -ms-flexbox; 
} 

Answer 3

Có lẽ đây sẽ có ích

-webkit-justify-content: space-around; 

Answer 4

Chỉ cần cố gắng này

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 */ 

này làm việc cho tôi

Answer 5

bản demo ->https://jsfiddle.net/xdsuozxf/

Safari vẫn đòi hỏi

.row{ 
 
    box-sizing: border-box; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex: 0 1 auto; 
 
    -ms-flex: 0 1 auto; 
 
    flex: 0 1 auto; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: row; 
 
    -ms-flex-direction: row; 
 
    flex-direction: row; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.col { 
 
    background:red; 
 
    border:1px solid black; 
 

 
    -webkit-flex: 1 ;-ms-flex: 1 ;flex: 1 ; 
 
}

<div class="wrapper"> 
 
     
 
    <div class="content"> 
 
     <div class="row"> 
 
       <div class="col medium"> 
 
        <div class="box"> 
 
        work on safari browser 
 
        </div> 
 
       </div> 
 
       <div class="col medium"> 
 
        <div class="box"> 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        </div> 
 
       </div> 
 
       <div class="col medium"> 
 
        <div class="box"> 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser 
 
        work on safari browser work on safari browser 
 
        work on safari browser 
 
        </div> 
 
       </div> 
 
     </div> 
 
    </div> 
 
    </div>

s tiền tố -webkit- sử dụng flexbox

Answer 6

tôi t hoạt động khi bạn thiết lập giá trị hiển thị các mục trong menu của bạn display: inline-block;-display: block;

Xem mã được cập nhật ở đây:

#menu { 
    clear: both; 
    height: auto; 
    font-family: Arial, Tahoma, Verdana; 
    font-size: 1em; 
    /*padding:10px;*/ 
    margin: 5px; 
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ 
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ 
    display: -ms-flexbox; /* TWEENER - IE 10 */ 
    display: -webkit-flex; /* NEW - Chrome */ 
    display: flex;   /* NEW, Spec - Opera 12.1, Firefox 20+ */ 
    justify-content: center; 
    -webkit-box-align: center; 
    -webkit-flex-align: center; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center;fffff 
    font-style: normal; 
    font-weight: 400px; 
} 

#menu a:link { 
    display: block; //here you need to change the display property 
    width: 100px; 
    height: 50px; 
    padding: 5px; 
    background-color: yellow; 
    /*border: 1px solid #cccccc;*/ 
    margin: 5px; 
    display: flex; 
    flex-grow: 1; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    font-weight: bold; 
    color: #1689D6; 
    font-size: 85%; 
} 
#menu a:visited { 
    //no display property here                  
    width: 100px; 
    height: 50px; 
    padding: 5px; 
    background-color: yellow; 
    /*border: 1px solid #cccccc;*/ 
    margin: 5px; 
    display: flex; 
    flex-grow: 1; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    font-weight: bold; 
    color: #1689D6; 
    font-size: 85%; 
} 
#menu a:hover { 
    //no display property here                    
    color: #fff; 
    width: 100px; 
    height: 50px; 
    padding: 5px; 
    background-color: red; 
    /*border: 1px solid #cccccc;*/ 
    margin: 5px; 
    display: flex; 
    flex-grow: 1; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    font-weight: bold; 
    font-size: 85%; 
} 
#menu a:active { 
    //no display property here                    
    color: #fff; 
    width: 100px; 
    height: 50px; 
    padding-top: 5px; 
    padding-right: 5px; 
    padding-left: 5px; 
    padding-bottom: 5px; 
    background-color: red; 
    /*border: 1px solid #cccccc;*/ 
    margin: 5px; 
    display: flex; 
    flex-grow: 1; 
    align-items: center; 
    text-align: center; 
    justify-content: center; 
    font-style: normal; 
    font-weight: bold; 
    font-size: 85%; 
}