5

シンプルなサイドバーをアーカイブしてみた | 通常のフロートで視覚的にコンテンツを表示し、( など) を使用して同じ高さの列に古典的な手法を使用しましたmargin-bottom: -99999px; padding-bottom: 99999pxが、それが気に入らず、あちこちで問題が発生したため、フレックスボックスを使用することにしました。試してみました少し前に固定サイズの幅で問題なく動作しましたが、現在はパーセンテージ幅になっているため、firefox はまったく気に入らなかったようです...

この例は、フレックスボックスが通常どのように機能することを期待しているかを示しており、サファリとクロムでは問題なく動作しましたが、Firefox はパーセンテージ幅を無視するだけです...これは、Firefoxの既知の問題であることがわかりましたが、古い問題であり、私は考えました彼らはすでにそれを解決しました...

次に、Firefox をだますために何かのことを試してみましたが、コンテンツに基づいてページごとにサイドバーのサイズが異なるため、期待したものではありませんでした...

そのため、柔軟なレイアウトのフレックスボックスをあきらめて、自分のニーズに合ったもっとシンプルなものを使用することになります...

しかし、誰かがこの問題を何らかの回避策で解決するのか、それとも私たち全員が mozilla によって修正されるのを待っているのか知りたいです...

ありがとう!

4

1 に答える 1

1

margin-bottom: -99999px; padding-bottom: 99999px回避策を使用しないことを強くお勧めします。流動的なレイアウトが必要な場合 (これが質問の内容だと思いますか?)、14%、86% の分割で、Flex の代わりに単純な古い CSS を使用してください。

http://jsfiddle.net/97dtV/7/

車輪を再発明する理由。サイトをレイアウトするためのより良い方法を探している場合は、「グリッド」アプローチを試してください。

  • セマンティック グリッド (http://semantic.gs/)
  • ブートストラップ - (http://twitter.github.com/bootstrap/index.html)

これは、何らかの特定の理由で flex が必要ないことを前提としています。必要な場合は無視してください ;)。また、CSS3 固有の属性を使用する場合は、下位互換性を考慮してください。

于 2012-03-05T11:32:19.673 に答える