Y at-il une solution de contournement CSS pour l'un des bug Firefox » avec le rétrécissement du contenu?

Question

Voici un violon avec mon code: http://jsfiddle.net/kizu/GCahV/ (comparer dans Firefox et tout autre navigateur moderne)

Ce que je veux atteindre:

1. Il doit être un bloc en ligne (ou au moins un bloc avec float) avec deux parties:. Gauche et à droite
2. Ces pièces doivent être côte à côte et doit être flexible, partie droite peut être absent du tout.
3. Le bloc parent doit avoir une certaine max-width (en % ou fixe dans px).
4. Lorsque la partie gauche est assez grand, il doit être overflowen, mais la partie droite doit toujours être affiché.

Utilisation inline-block, float et overflow: hidden je l'ai fait bien travailler dans le dernier Chrome, Safari et Opera, mais frappé par le fait que Firefox ont un bug:. Les psy partie gauche lorsque la partie droite est longue

La seule CSS solution de contournement que j'ai trouvé est d'essayer des éléments de position pour Fx dans le modèle flex-box, mais ce n'est pas parfait. Je ne pouvais pas faire le parent d'avoir max-width (ou width du tout)

Voici mon meilleur essai à ce jour: http://jsfiddle.net/kizu/GCahV/1 /

---

Alors, les questions sont:

1. Y at-il un moyen de faire comprendre Firefox max-width pour .b-shrinker?
2. Y at-il d'autres CSS uniquement solution de contournement pour ce bogue Firefox ou tout autre moyen de faire ce que je veux?

Answer 1

Ok, donc de jouer avec le FlexBox un peu je l'ai trouvé une solution assez agréable: http://dabblet.com / essentiel / 4701626

Le seul problème est-il que Fx perd les points de suspension pour la partie gauche, mais il est un problème mineur, « tout le reste fonctionne bien la cause.

Alors, voici un code qui fixe il:

.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;   
    }

Sauf pour faire le flexboxy bloc, le besoin de bloc de gauche pour avoir white-space:normal et word-break: break-all, de sorte que le contenu à long dans la partie gauche ne fera pas cette partie plus que le corps. Et pour rendre le contenu survolée être caché, il y a jeu de height.

Alors, la gauche seul problème est le manque des points de suspension, donc si quelqu'un trouverait une solution pour cela -. Je serais reconnaissant

Answer 2

1. D'après ce que je lis, Fx comprend max-width de la version 1.0. https://developer.mozilla.org/en/CSS/max-width#Browser_compatibility . L'ellipse fonctionne de Fx 7.0 sur. Il est donc pas encore mis en œuvre.
2. Donner { max-width: 100%; width: 100% } .B-shrinker et il aura l'air bien dans Fx et WebKit et Opera. http://jsfiddle.net/GCahV/11/