5

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

我想要达到的目标：

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

使用inline-block,我使它在最新的 Chrome、Safari 和 Opera 中运行良好，但令我震惊的是 Firefox 有一个错误：当右侧部分较长时，左侧部分会缩小float。overflow: hidden

我发现的唯一 CSS 解决方法是尝试在 flex-box 模型中为 Fx 定位元素，但这并不完美：我无法让父级拥有max-width（或width根本没有）。

这是我迄今为止最好的尝试：http: //jsfiddle.net/kizu/GCahV/1/

所以，问题是：

  1. 有没有办法让 Firefoxmax-width理解.b-shrinker？
  2. 对于这个 Firefox 的错误或完全不同的方式来做我想做的事，是否有任何其他CSS 唯一解决方法？
4

2 回答 2

1
  1. 从我读到的内容来看，Fx 从 1.0 版开始就可以理解 max-width 了。 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/
于 2011-09-09T09:15:04.353 回答
0

好的，所以在玩了一下 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:normaland word-break: break-all，所以左边的长内容不会使这部分比 body 长。并且为了使溢出的内容被隐藏，有height设置。

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

于 2013-02-03T12:58:49.860 回答