Gibt es eine CSS -Problemumgehung für einen der Firefox -Fehler mit schrumpfenden Inhalten?

Question

Hier ist eine Geige mit meinem Code: http://jsfiddle.net/kizu/gcahv/ (Vergleichen Sie es in Firefox und jedem anderen modernen Browser)

Was ich erreichen möchte:

1. Es muss einen Inline -Block geben (oder mindestens einen Block mit float) mit zwei Teilen: links und rechts.
2. Diese Teile müssen nebeneinander sein und flexibel sein, der richtige Teil kann überhaupt nicht vorhanden sein.
3. Der übergeordnete Block muss einige haben max-width (in % oder in px).
4. Wenn der linke Teil groß genug ist, muss es überflüssig sein, aber der richtige Teil muss immer gezeigt werden.

Verwendung inline-block, float und overflow: hidden Ich habe es in der neuesten Chrome, Safari und Oper gut funktionieren, aber erfuhr mit der Tatsache, dass Firefox einen Fehler hat: Der linke Teil schrumpft, wenn der rechte Teil lang ist.

Die einzige CSS-Problemumgehung, die ich gefunden habe max-width (oder width überhaupt).

Hier ist mein bisher bester Versuch: http://jsfiddle.net/kizu/gcahv/1/

---

Die Fragen sind also:

1. Gibt es eine Möglichkeit, Firefox verstehen zu lassen? max-width zum .b-shrinker?
2. Gibt es noch andere? Nur CSS Problemumgehung für diesen Firefox -Fehler oder eine völlig andere Art, das zu tun, was ich will?

Answer 1

OK, mit dem Spielen mit der Flexbox ein bisschen fand ich eine etwas schöne Lösung: http://dabblet.com/gist/4701626

Das einzige Problem, das es hat, ist, dass FX die Ellipse für den linken Teil verliert, aber es ist ein kleines Problem, weil alles andere gut funktioniert.

Hier ist ein Code, der ihn behoben hat:

.b-wrapper_fixed .b-shrinker__in {
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-direction : reverse;
    }
.b-wrapper_fixed .b-shrinker__left {
    white-space: normal;
    word-break: break-all;
    -moz-box-flex: 1;   
    height: 1.2em;
    }
.b-wrapper_fixed .b-shrinker__right {
    -moz-box-flex: 1;   
    }

Mit Ausnahme der Blockflexboxy muss der linke Block haben white-space:normal und word-break: break-all, Der lange Inhalt im linken Teil macht diesen Teil nicht länger als der Körper. Und um die überfließenden Inhalte zu verstecken, gibt es height einstellen.

Das einzige Problem ist also die fehlende Ellipse. Wenn also jemand eine Lösung dafür finden würde - wäre ich dankbar.

Answer 2

1. Nach dem, was ich gelesen habe, versteht FX die Max-Breite von Version 1.0 auf.https://developer.mozilla.org/en/css/max-width#browser_compatibility. Die Ellipse funktioniert von FX 7.0 an. Es ist also noch nicht implementiert.
2. Gib .b-shrinker { max-width: 100%; width: 100% } Und es wird in FX und Webkit und Opera gut aussehen. http://jsfiddle.net/gcahv/11/