marcello: Computed Style bei Chrome DevTools mixt Werte eines Attributs

Hallo,

kann mir jemand sagen, ob es sich hier um einen Bug meines Browsers handelt? Alle anderen Erklärungsversuche meinerseits sind leider gescheitert :)

Folgendes html:

  
<!DOCTYPE HTML>  
<html>  
<head>  
<style type="text/css">  
html, body { width: 100%; display: block; margin: 0; padding: 0; }  
  
.wrap{  
  border:1px solid red;  
  margin-left: auto;  
  margin-right: auto;  
  width: 57em;  
  display: flex;  
  justify-content: center;  
}  
  
#footer{  
  justify-content: space-between;  
}  
</style>  
  
</head>  
<body>  
  
<div class="wrap" id="footer">  
  <div>Text linksbündig</div>  
  <div>Text rechtsbündig</div>  
</div>  
  
</body>  
</html>  

Laut dieser Seite müssten die neusten Browser eigentlich mit flex umgehen können. Bei mir klappts auch im Firefox und IE. D.h. die beiden divs sitzen links und rechts außen im übergeordneten Container. Nur mein Chrome macht Probleme. Scheinbar überschreibt die Regel für den ID-Selektor die des Klassen-Selektor nicht, sondern beide werden quasi gemixt. Der erste div rutscht in die Mitte des Containers, der zweite rutscht rechts aus dem Container raus.

Schaut man in den DevTools nach, steht da unter dem Tab computed: "justify-content: space-between center;"

Warum geht sowas überhaupt? Soweit ich weiß, gibt es den Wert "space-between-center" gar nicht.

?!

Klar könnte ich auch einfach eine neue Klasse verwenden, statt einen Wert aus .wrap per ID zu überschreiben. Ich will aber wissen, was hier falsch läuft / ich falsch gemacht habe.

--
Eine Frage ist genau dann fragwürdig, wenn der summierte Nutzen, der allen (zukünftigen) Lesern des Threads durch eine kompetente Beantwortung der Frage entsteht, die summierten Mühen aller potentiellen Fragebeantworter übersteigt. Generiert eine Frage auf inhaltlicher Ebene einen negativen Nettonutzen, so kann durch ein nettes Pläuschchen der Beteiligten zusätzlicher Nutzen generiert werden. (Thread Net Utility by marcello)
  1. Hi,

    Laut dieser Seite müssten die neusten Browser eigentlich mit flex umgehen können.

    Zumindest laut [https://developer.mozilla.org/en/docs/Web/CSS/justify-content#Browser_compatibility] benötigt Chrome immer noch das "-webkit-"-Präfix.

    MfG ChrisB

    1. Hi,

      dankeschön! -webkit- alleine bringt aber leider nichts. Zumindest in meinem Chrome (neueste Version  41.0.2272.74 beta-m (64-bit)) wird es wie oben dargestellt. Aaaaber: der Wert in den DevTools heißt nicht

      justify-content: space-between-center;
      sondern
      justify-content: space-between center;

      ...was darauf schließen lässt, dass es kein fehlerhafter Mix aus zwei Werten ist, sondern dass mehrere Werte für justify-content zulässig sind. Ich dachte zuerst space-between und center müssten sich gegenseitig ausschließen. Die DevTools zeigen aber keinen Fehler für eine solche Kombination an. Lange Rede kurzer Sinn - mit dieser Kombination kann man für Chrome die Zentrierung aus "space-between center" überschreiben:

      justify-content: space-between flex-start;

      Man muss aber dabei beachten, dass Firefox und IE die Zeile jetzt komplett ignorieren. Also letztendlich klappt folgendes in allen 3 Browsern:

        
      #footer{  
       justify-content: space-between;  
        -webkit-justify-content: space-between flex-start;  
      }
      

      ...gilt zumindest für die aktuellen Versionen.

      Ich frag mich zwar immernoch, warum Chrome eine Kombination mehrerer Werte zulässt und die anderen Browser nicht. Zumindest kann ich das Problem jetzt aber umgehen.