5

これが私のコードのフィドルです：http：//jsfiddle.net/kizu/GCahV/（Firefoxと他の最新のブラウザで比較してください）

私が達成したいこと：

  1. float左と右の2つの部分からなるインラインブロック（または少なくともを含むブロック）が必要です。
  2. これらのパーツは並べて配置する必要があり、柔軟性が必要です。右側のパーツはまったく存在しない可能性があります。
  3. 親ブロックにはいくつかmax-width（in%またはfixed in px）が必要です。
  4. 左側が十分に大きい場合はオーバーフローする必要がありますが、右側は常に表示する必要があります。

を使用してinline-block、最新のChrome、Safari、Operaでうまく機能するようにしましたが、Firefoxにはバグがあることに気付きました。右側が長いと、左側が縮小します。floatoverflow: hidden

私が見つけた唯一のCSS回避策は、フレックスボックスモデルでFxの位置要素を試すことですが、それは完璧ではありません。親に持たせることができませんでしたmax-width（またはwidthまったくできませんでした）。

これが私のこれまでの最善の試みです：http：//jsfiddle.net/kizu/GCahV/1/

したがって、質問は次のとおりです。

  1. max-widthFirefoxに理解させる方法はあり.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

わかりましたので、フレックスボックスを少しいじって、私はやや良い解決策を見つけました: 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:normalとが必要なword-break: break-allので、左側の部分の長いコンテンツによってこの部分が本体より長くなることはありません。そして、あふれたコンテンツを非表示にするheight設定があります。

したがって、残っている唯一の問題は省略記号の欠落です。誰かがこれに対する解決策を見つけてくれれば、私は感謝します。

于 2013-02-03T12:58:49.860 に答える