28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème flex:1 sur Firefox

Bonjour,

Sur la home de ce site en dév, j'ai un petit soucis : sur la home, descendez jusque ------ Toutes nos actualités --------- (www.dev-yesyouweb.com/ )

Sur Chrome, IE et Mac le texte "toutes nos actualités" est bien encadré par 2 traits horizontaux.
Sur Firefox, le texte est à gauche et mes traits au dessus / dessous Smiley sweatdrop 

.actu p {
     display:flex;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
     color: #8C8279;     
     font-size:16px;
     margin-bottom: 32px;
}
.actu p:before, .actu p:after {
	content:'';
	flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    -moz-flex: 1;
	border-bottom: 2px solid #EFEFEF;
	margin:auto 0.45em;
	display: block; /* IE fix */
}


Voyez-vous pourquoi ? Merci !!
en principe, la regle non prefixé est placé en dernier pour eviter que le navigateur ne cherche a implementer une version prefixer obsolete.

En gros:
.actu p {
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
     display:flex;
     color: #8C8279;     
     font-size:16px;
     margin-bottom: 32px;
}
.actu p:before, .actu p:after {
	content:'';
    -webkit-flex: 1;
    -ms-flex: 1;
    -moz-flex: 1;
	flex: 1;
	border-bottom: 2px solid #EFEFEF;
	margin:auto 0.45em;
	display: block; /* IE fix */
}

devrait mieux passer Smiley smile
Sujet clos
Aller à