Firefox'；内容缩水的bug？

下面是我的代码：（在Firefox和任何其他现代浏览器中进行比较）

我想要达到的目标：

必须有一个包含两部分的内联块（或者至少有一个带有

float

）左侧和右侧

这些部件必须并排且必须灵活，可以完全不使用正确的部件

父块必须具有一些

max width

（在

%%/code>中或固定在
px
）

当左边的部分足够大时，它必须被显示出来，但右边的部分必须总是被显示出来

使用

inline block

、

float

和

overflow:hidden

我让它在最新的Chrome、Safari和Opera中工作得很好，但Firefox有一个bug：当右半部较长时，左半部会收缩

我发现的唯一CSS解决方法是尝试在flex box模型中为Fx定位元素，但这并不完美：我无法使父级具有

最大宽度

（或

宽度

）

以下是我迄今为止最好的尝试：

---

因此，问题是：

有没有办法让Firefox理解

的最大宽度
.b-shrinker

对于这个Firefox的bug，是否有任何其他的CSS解决方法，或者完全不同的方法来实现我想要的

从我所读到的，Fx从1.0版开始理解最大宽度。 . 椭圆从FX7.0开始工作。所以它还没有实施

给.b-shrinker

{max width:100%；width:100%}

，它在Fx、WebKit和Opera中会很好看

---

好的，通过使用flexbox，我找到了一个不错的解决方案：

它唯一的问题是，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外，左侧块需要有

空白：正常

和

字中断：全部中断

，因此左侧部分的长内容不会使该部分比主体长。为了隐藏溢出的内容，设置了

height

set

---

因此，剩下的唯一问题是省略，因此如果有人能找到解决方案，我将不胜感激。

+1将Firefox缩写为Fx而不是FF。不管怎样，这会影响到它的哪个版本？我从3.0.19一直测试到6.0.1-所有版本都有这个bug。+1，希望你能确保bugzilla上有一个bug？2007年有一个带有嵌套浮动的bug，还有一些类似的。不过，在bugzilla没有解决办法。也许，我会在稍后提交这个bug（在我创建了更多的最小测试用例之后）。我不认为这是一个bug。我认为这是css规范中没有规定的情况。css 2中从未指定如果不指定宽度，浮动的行为方式。我不知道这在css3中是否发生了变化。因此，不同的浏览器处理这些边缘情况的方式不同。只有当块没有伸缩框行为时，它才能理解

最大宽度

。当它在那里-

max width

神奇地停止工作。2.仔细阅读：“必须有一个内联块”-设置

width:100%

会将块拉伸到整个宽度，但我想要的是：只要有一点内容，就将其内联并缩小。1。这是真的，可能是因为flexbox行为仍然有效，而firefox flexbox行为已经过时。在flexbox不再工作之前，我根本不会使用它。2.我读过，但我认为用当前的fx版本无法实现。1。在我的例子中，它只是使块看起来比受bug影响时更好。2.好吧，现在我用JS实现了这个行为，但是如果有人能找到比Fx更聪明的方法，那就太好了。