Firefox的错误之一的CSS是否有CSS解决方案？

Question

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

我想实现的目标：

1. 必须有一个内联块（或至少一个块 float）有两个部分：左右。
2. 这些零件必须是并排的，并且必须具有灵活性，完全不存在右零件。
3. 父块必须有一些 max-width （在 % 或固定在 px).
4. 当左侧部分足够大时，必须溢出，但是必须始终显示右侧。

使用 inline-block, float 和 overflow: hidden 我在最新的Chrome，Safari和Opera中使其运作良好，但事实是，Firefox有一个错误：左侧右侧长时间缩小。

我发现的唯一CSS解决方法是在Flex-Box模型中尝试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;   
    }

除了制作Block 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缩小器 { max-width: 100%; width: 100% } 它在FX，Webkit和Opera中看起来会很好。 http://jsfiddle.net/gcahv/11/