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

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. 有没有一种方法,使火狐理解max-width的.b-shrinker？
2. 是否有任何其他CSS只针对此Firefox的错误或完全不同的方式来执行我想要的操作？

Answer 1

好吧，通过使用弹性盒，我找到了一个不错的解决方案：http://dablet.com/gist/4701626

\n\n

它唯一的问题是 Fx 丢失了左侧部分的省略号，但这是一个小问题，因为其他一切都工作正常。

\n\n

所以，这是修复它的代码：

\n\n

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

\n\n

除了使块变得flexboxy之外，左侧块还需要具有white-space:normal和word-break: break-all，因此左侧部分的长内容不会使该部分比正文长。并且为了使溢出的内容被隐藏，有height设置。

\n\n

所以，剩下的唯一问题是缺少省略号，所以如果有人能找到这个 \xe2\x80\x94 的解决方案，我将不胜感激。

\n