webkit display:inline-block verhält sich uneinheitlich

Question

Ich habe eine Spanne mit mehreren anderen Spannen darin, und ich möchte die Unterspannen zwischen umschalten display:block y display:inline . Die Spannen beginnen mit display:inline-block werden dann umgeschaltet auf display:block . Das funktioniert gut. Das Problem ist, wenn Umschalten zurück in Webkit (es funktioniert gut in Firefox): die Spannen werden mit zusätzlichen Zeilenumbrüchen zwischen ihnen gerendert.

Kann ich dies korrekt wiedergeben lassen, ohne <br/> Tags zwischen den Spannweiten?

Demo hier: http://jsbin.com/omalu3/4/edit

Answer 1

Jede andere Lösung wäre ein Workaround, da es sich um einen Browserfehler handelt. Eine Alternative zur Lösung von Derekerdmann:

  #a.multiline * { width: 100% }
  #a.oneline * { width: auto }
  #a * { border:solid 1px black; display:inline-block }

Answer 2

Another workaround would be to not wrap the children spans with another span -- which is an inline element. Verwenden Sie ein <div> für #a und es verhält sich richtig (in Webkit zumindest!).

Andererseits ist der Stern-Selektor nicht wirklich effizient, obwohl ich weiß, dass dies nur ein Beispiel ist, also werde ich das hier nicht kritisieren :D

Answer 3

Ist das nicht lustig?

Ich bin mir nicht sicher, was das Problem verursacht, aber es verschwindet, wenn Sie Folgendes hinzufügen float: left; a #a.oneline * . Wenn Sie das tun, können Sie die Anzeige in Block ändern, so dass Ihre Stile wie folgt aussehen:

#a.multiline * {  }
#a.oneline * { float:left; }
#a * { border:solid 1px black; display:block;}

Der einzige Unterschied zwischen dieser Lösung und Ihrem ursprünglichen Layout besteht darin, dass die oneline Blöcke werden am oberen statt am unteren Rand ausgerichtet, aber Sie können für diese Elemente eine feste Höhe festlegen.