Flexbox nicht richtig funktioniert auf Firefox, aber in Ordnung, auf Chrome & Safari
Ich Baue eine website, die stützt sich stark auf flexbox. Problem ist nur, dass ich nicht bekommen kann es zu imitieren, die chrome-Verhalten auf Firefox. Ich schaute auf CSS-Tricks, SO und in diesem Artikel (http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/)
Diese waren alle sehr nett und gab einige gute Vorschläge, von denen keiner für mich gearbeitet. Ich habe versucht,
* {
min-height: 0;
min-width: 0;
}
Und jede Variante, die auf mein Kind und Eltern-Elemente, aber ohne Erfolg. Ich habe ein CodePen-link, das veranschaulicht mein problem. Beim öffnen in FF 37.0.2 UND 46.0.1, es ist völlig gebrochen. In Chrome und Safari, es sieht einfach nur gut.
/* Header Styles */
#header{
width:85%;
margin:0 auto;
height:375px;
background-color:rgba(252,241,223, 1);
padding:25px 75px 25px 0;
font-family: 'Quattrocento Sans', sans-serif;
border-radius:3px 3px 0 0;
}
#header-logo{
width:33%;
height:100%;
display:flex;
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 */
align-items:center;
justify-content:center;
float:left;
}
#header-nav{
width:66%;
height:100%;
display:flex;
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 */
justify-content:center;
/* align-items:center;*/
flex-direction:column;
}
#header-nav-tabs{
margin-top:25px;
padding-top:25px;
border-top:1px solid rgba(0,0,0,0.5);
}
#header-nav-tabs a{
font-size: 20px;
color:black;
text-decoration:none;
margin:0 10px;
white-space: nowrap;
}
#header-nav-tabs a:hover{
text-decoration:underline;
}
@media screen and (max-width: 680px) {
#header{
height:auto;
text-align:center;
padding:25px;
display:flex;
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 */
flex-direction: column;
align-items: center;
}
#header-logo{
width:auto;
height:auto;
}
#header-nav{
width:auto;
height:auto;
}
#header-nav-tabs a{
font-size:17px;
}
}
<header id="header" role="banner">
<div id="header-logo">
<img src="http://staging.thestarvingsailor.ca/wp-content/uploads/2016/01/Moore-Logo.png" />
</div>
<div id="header-nav">
<div id="header-nav-title">
<h1>Test Site</h1>
<p>Description for the test site.</p>
</div>
<div id="header-nav-tabs">
<a href="http://www.moorefamilychiropractic.ca">Home</a>
<a href="http://www.moorefamilychiropractic.ca/about-us">About Us</a>
<a href="http://www.moorefamilychiropractic.ca/services">Services</a>
<a href="http://www.moorefamilychiropractic.ca/reviews">Reviews</a>
<a href="http://www.moorefamilychiropractic.ca/blog">Blog</a>
<a href="http://www.chirocorrection.com/moorechiro/" target="_blank" rel="noopener noreferrer">My ChiroCorrection</a>
<a href="http://www.moorefamilychiropractic.ca/how-can-chiropractic-help-me">How Can Chiropractic Help Me?</a>
<a href="http://www.moorefamilychiropractic.ca/contact-us">Contact Us</a>
</div>
</div>
</header>
http://codepen.io/anon/pen/mPYZGY
display: box;
oder möchten Sie display: flex
? Entfernen display: box;
Eigenschaften von deinem code wird dieses Problem beheben.Ich hatte den Eindruck, dass -moz-box war das flexbox-Präfix für die FF, aber ich Schätze, ich war falsch! Entfernen Sie es behoben das Problem für mich.
display: box;
war der Wert der Eigenschaft für die 2009-version des spec. Es wurde geändert im Jahr 2011 auf display: flex;
und der Browser gefolgt, aber Sie beinhalten oft die Unterstützung für die alten Eigenschaften zu erhalten Abwärtskompatibilität mit Seiten, die mit alten code.Auch, es ist eigentlich nicht die Eigenschaft selbst, die das problem verursacht. Es ist, wie Sie haben Ihre Präfixe bestellt im code. Sie müssen nicht alles entfernen. In der Tat, die Entfernung ist nicht wirklich das problem beheben, weil es kann passieren, noch einmal mit einem anderen browser. Eine zuverlässigere Lösung wäre fix die Bestellung. Ich postete eine Antwort.
Ich sehe; ich dachte, Sie wurden unter Bezugnahme auf andere Browser, die Abholung der
display: box
Eigenschaften.
InformationsquelleAutor colinmcp | 2016-05-18
Du musst angemeldet sein, um einen Kommentar abzugeben.
Das problem ist die Reihenfolge der Präfixe.
Immer an die offiziellen Eigenschaft (W3C-standard) als letztes in der Liste.
CSS-rendering-engine wählen, wird die zuletzt geltende Eigenschaft. Firefox ist zu Lesen Vergangenheit
display: flex
und Auswahldisplay: -moz-box
, die das problem verursacht.Mehr details: Was ist der richtige Weg, um vendor-Präfixe für die flexbox?
InformationsquelleAutor Michael_B
Versuchen Sie, die Reihenfolge der
display
property-Deklarationen, so dass das standard ist letzten. Ich denke, FF ist die Vermietung, die-moz
Präfix-Eigenschaft überschreiben Sie die zuvor erklärten Wert(s).InformationsquelleAutor Ito Pizarro