Comment puis-je faire flex zone de travail dans safari?
Comment puis-je faire flex boîtes de travailler dans Safari?
J'ai un réactif de nav qui utilise un CSS flex case pour être réactif
et pour une raison quelconque, il ne fonctionnera pas dans Safari.
Voici mon code:
CSS:
#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%;
}
HTML:
<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/
Est-il un préfixe qui me manque pour le faire fonctionner dans Safari?
- quelle est la version de safari utilisez-vous? pourquoi est-il ni de travail, quel est-il de différent? plus d'infos vous fournir la meilleure 🙂
Vous devez vous connecter pour publier un commentaire.
J'ai dû ajouter de la webkit préfixe pour safari (mais flex pas flexbox):
display:-webkit-flex
display: -webkit-flex
déjà, je ne vois pas en quoi cela répond à la question.-webkit-flexbox
au lieu dewebkit-flex
. également utiliser la valeur par défaut flex. comme çadisplay: flex; display: -webkit-flexbox;
Juste essayer ce
cela a fonctionné pour moi
Essayez ceci:
Juste essayer
-webkit-flexbox
. il travaille pour safari.webkit-flex
safari pas prendre.display: flex; display: -webkit-flexbox;
Peut-être que ce serait utile
Démo -> https://jsfiddle.net/xdsuozxf/
Safari exige toujours le
-webkit-
préfixe à utiliser flexbox.CSS:
HTML:
Il fonctionne lorsque vous définissez la valeur d'affichage de vos éléments de menu à partir
display: inline-block;
àdisplay: block;
Voir mise à jour de votre code ici: