对于缩小内容的Firefox有什么问题的解决方法吗？

Question

这是我的代码的小提琴：http://jsfiddle.net/kizu/GCahV/（在Firefox和任何其他现代浏览器中进行比较）

我想要实现的目标：

1. 必须有一个内联块（或至少一个带有float的块），它有两个部分：左和右。
2. 这些部分必须是并排的，必须是灵活的，右边部分可以不存在。
3. 父块必须包含max-width {%或px中的inline-block。
4. 当左侧部分足够大时，它必须是溢出的，但必须始终显示右侧部分。

使用float，overflow: hidden和max-width我在最新的Chrome，Safari和Opera中使其运行良好，但遭遇Firefox有一个错误：左侧部分缩小当正确的部分很长时。

我发现的唯一的CSS解决方法是在弹性框模型中尝试Fx的位置元素，但它并不完美：我无法让父级拥有width（或max-width在所有）。

到目前为止，这是我最好的尝试：http://jsfiddle.net/kizu/GCahV/1/

---

所以，问题是：

1. 有没有办法让Firefox了解.b-shrinker的{​​{1}}？
2. 是否还有其他仅限CSS 解决此Firefox的错误或完全不同的方式来执行我想要的操作？

Answer 1

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/

Answer 2

好的，所以稍微玩一下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;   
    }

除了使块具有弹性外，左侧块需要white-space:normal和word-break: break-all，因此左侧部分的长内容不会使该部分长于主体。要使溢出的内容隐藏，可以设置height。

所以，剩下的唯一问题就是缺少省略号，所以如果有人能找到解决方案 - 我会很感激。