CSS Flüssigkeit Bild Hintergrund funktioniert nicht in Firefox Browser

Ich versuche, flüssige Bild Hintergrund für eine meiner Webseite zu implementieren. Es funktioniert perfekt in Chrome, aber ich kann es nicht in Firefox arbeiten. Ich habe Bilder von zwei Quadraten, die proportional skaliert werden, wenn das Browserfenster verkleinert wird.CSS Flüssigkeit Bild Hintergrund funktioniert nicht in Firefox Browser

Hier ist der html:

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="index.css"> 
<title>Test Flex</title> 
</head> 
<body> 
<div id="parent_div"> 
    <div id="bluesquare_div"></div> 
    <div id="yellowsquare_div"></div> 
</div> 
</body> 
</html>

Und hier ist der CSS:

body{ 
    background: #444444; 
} 

#parent_div{ 
    display: flex; 
} 

#bluesquare_div{ 
    width: 50%; 
    background: url("bluesquare.png"); 
    height: 0; 
    background-size: contain; 
    background-repeat: no-repeat; 
    padding-top: 50%; 
    flex-grow: 1; 
} 


#yellowsquare_div{ 
    width: 50%; 
    background: url("yellowsquare.png"); 
    height: 0; 
    background-size: contain; 
    background-repeat: no-repeat; 
    padding-top: 50%; 
    flex-grow: 1; 
}

Das Problem ist, ich sehe keinen Ausgang in Firefox. Wenn ich display:flex nicht verwende, dann kann ich die zwei Quadrate in Firefox sehen, aber meine Webseite erfordert die Verwendung von flexbox, also kann ich es nicht fallen lassen.

Jeder hat eine Idee, warum es nicht in Firefox funktioniert?

Hier ist der Screenshot für Chrome-Version: 55.0.2883.87 m

Und hier ist der Screenshot für Firefox Version: 50.1.0

Quelle

2016-12-18 Kuldeep Kumar

auf mehr graben, kam gerade über diese: http://stackoverflow.com/questions/33502702/flex-elements-ignore-percent-padding-in-firefox – kukkuz

Die Frage ist die padding-top: 50% für die Flex-Items angegeben!

Margin s/s padding werden normalerweise gegen die width des umschließenden Blocks statt dessen height gelöst. Aber im Fall von flexbox gibt es einige Verwirrung unter den User Agents (Browser) - Ich denke:

Chrome behebt basierend auf der width von flex-Artikel
Firefox löst Based auf die height von flex-Artikel

Siehe die Warnung in CSS Flexbox Spec:

Autoren sollten mit Prozentsätzen in Polsterungen oder Ränder auf flex Artikel vollständig vermeiden, da sie unterschiedliche Verhalten in verschiedenen Browsern bekommen.

Im Idealfall werden Sie müssen einen anderen Weg denken - vielleicht als fix Sie können Sie Ansichtsfenster Einheiten für padding statt Prozente und Sie nicht height: 0 benötigen - siehe Demo unter:

body { 
 
    background: #444444; 
 
} 
 
#parent_div { 
 
    display: flex; 
 
} 
 
#bluesquare_div { 
 
    width: 50%; 
 
    background: url("http://placehold.it/100x100"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    padding-top: 50vh; 
 
    flex-grow: 1; 
 
} 
 
#yellowsquare_div { 
 
    width: 50%; 
 
    background: url("http://placehold.it/100x100"); 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    padding-top: 50vh; 
 
    flex-grow: 1; 
 
}

<div id="parent_div"> 
 
    <div id="bluesquare_div"></div> 
 
    <div id="yellowsquare_div"></div> 
 
</div>

Quelle

2016-12-18 07:50:53 kukkuz

CSS Flüssigkeit Bild Hintergrund funktioniert nicht in Firefox Browser

Antwort

Verwandte Themen