コンテンツを縮小したFirefoxのバグの1つにCSS回避策はありますか？

Question

これが私のコードのフィドルです： http://jsfiddle.net/kizu/gcahv/ （Firefoxとその他の最新のブラウザでそれを比較してください）

私が達成したいこと：

1. インラインブロック（または少なくともブロックがある必要があります float）2つの部分：左と右。
2. これらの部品は並んでいる必要があり、柔軟でなければなりません。右部品はまったく存在しない可能性があります。
3. 親ブロックにはいくつかが必要です max-width （の % または固定 px).
4. 左の部分が十分に大きい場合、それはオーバーフェンでなければなりませんが、正しい部分を常に表示する必要があります。

使用 inline-block, float と overflow: hidden 私は最新のクロム、サファリ、オペラでうまく機能しましたが、Firefoxにはバグがあるという事実にぶつかりました。右の部分が長いときに左の部分が収縮します。

私が見つけた唯一のCSS回避策は、FXボックスモデルのFXの位置要素を試すことですが、それは完璧ではありません。親に持つことができませんでした max-width （また width まったく）。

これがこれまでの私の最高の試みです： http://jsfiddle.net/kizu/gcahv/1/

---

だから、質問は次のとおりです。

1. Firefoxに理解させる方法はありますか max-width 為に .b-shrinker?
2. 他にありますか CSSのみ このFirefoxのバグの回避策、または私が望むことをするためのまったく異なる方法ですか？

Answer 1

わかりました、だからFlexBoxで遊ぶことで、私はやや素晴らしい解決策を見つけました： http://dabblet.com/gist/4701626

それが抱えている唯一の問題は、FXが左部の楕円を失うことですが、それは小さな問題です。

だから、ここにそれを修正したコードがあります：

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

ブロックのFlexboxyを作成することを除いて、左ブロックには必要です white-space:normal と word-break: break-all, 、したがって、左部の長いコンテンツは、この部分を体よりも長くしません。そして、あふれたコンテンツを隠すために、 height 設定。

したがって、残っている唯一の問題は省略記号が欠けているので、誰かがこれの解決策を見つけるなら、私は感謝します。

Answer 2

1. 私が読んだことから、FXはバージョン1.0の最大幅を理解しています。https://developer.mozilla.org/en/css/max-width#browser_compatibility. 。楕円はFX 7.0から動作します。そのため、まだ実装されていません。
2. .b-shrinkerを与えます { max-width: 100%; width: 100% } また、FXとWebKit、Operaで見栄えがよくなります。 http://jsfiddle.net/gcahv/11/