如何让 flexbox 在 Safari 中工作? 我有一个响应式导航,它使用 CSS flexbox 进行响应 由于某些原因,它在 Safari 中不起作用。
这是我的代码:
#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%;
}
<nav id="menu">
<a href="#">Philadelphia</a>
<!--<a href="#">Vacation Packages</a>-->
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>
http://jsfiddle.net/cyberjo50/n55xh/3/
是否缺少前缀以使其在 Safari 中工作?
最佳答案
为 flex 赋值解决了我的问题,例如
flex: 1 0 auto
关于html - 如何让 flex box 在 safari 中工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24899943/