1

私は完全にフレックスなパーセンテージベースのレイアウトを作成しています。

左側にナビゲーション バーがあり、フル モードからスモール モードに切り替わります。これを実現するために (ナビゲーションは絶対位置にあるため)、メイン コンテンツのラッピング div にパディングを追加しています。内部コンテンツのサイズ変更。

これを行うための簡単な jQuery 関数を追加しましたが、Chrome でクリックすると、メイン コンテンツがコンテナーからはみ出してしまい、コンテナーのサイズが 100% 幅に戻りません。

これはChromeでのみ発生しているようです-理由を知っている人はいますか、またはそれに対抗するために何ができますか?

このサイトは次の場所にあります: http://dev.barringtonmedia.co.uk/test/layout.html

この問題は、次の画像で確認できます。 Chrome - 不正な動作 - 白い枠のボックスが赤いボックスからはみ出している

Firefox - 正しい動作で、ブレイクアウトは発生していません。

遊びが好きなら、それでjsfiddleを作成しました： http://jsfiddle.net/Dycd4/

4

2 に答える 2

2

私は今、この問題を数回見てきました。

ここでの私の答えからの修正は機能します: jQuery CSS レンダリング - Chrome ではなく Firefox で機能します

ここでコードに適用されます: http://jsfiddle.net/thirtydot/Dycd4/1/

于 2012-06-18T11:22:55.597 に答える
0

そのレンダリングの問題の背後にある理由についての本当の答えではなく、提案です。実際には、jQuery の代わりに css メディア クエリを使用して、さまざまな幅で css を制御できます。

純粋主義者向けの W3C リンク: http://www.w3.org/TR/css3-mediaqueries/

MDN のハンズオン ガイド: https://developer.mozilla.org/en/CSS/Media_queries

于 2012-06-18T11:06:11.947 に答える