10

Firefox（および他のほとんどのブラウザ）でズームアウトすると、右側のサイドバーとトップメニューのレイアウトが崩れます。サイドバーがページの下部にジャンプします。この問題を再現するには、サイトにアクセスして次の手順を実行してください。

  1. ブラウザの表示メニューの下を見つけZoom Outて、数回クリックします。
  2. メニューとサイドバーにどのように影響するかに注意してください。

これまでに私が見つけた唯一の解決策は、サイドバーの幅を数ピクセル減らし、メニューリスト項目の1つの幅を減らすことです。このダミー修正の問題は、サイトを実際のサイズで表示すると、メニューの幅が数ピクセル欠落していることがわかることです。

確かに、この問題にはもっと良い解決策があるはずです。あなたは知っていますか？

4

4 に答える 4

1

私の知る限り、デスクトップ ブラウザーはレイアウトにサブピクセル解像度を使用しません (WebKit の実装は現在保留中ですが、他のブラウザー エンジンに関する情報はありません)。これが、CSS でボックスのサイズを変更するときにピクセルの端数を使用できない理由です。ズームは、レイアウト エンジンが浮動小数点数の代わりに整数を処理できるように、CSS プロパティを一般的なズーム ファクターでスケーリングし、残りを四捨五入します (値を下げると思います)。

ズーム レベル間で均等に分割されるピクセル値を選択する以外に、これに対する難しい解決策はありません。もう 1 つの方法は、コンテナーにパーセンテージ ベースの幅の定義を使用することです。この方法では、ブラウザーが数値を正しく四捨五入し、両方のコンテナーの共通の幅が 100% を超えない場合 (10 分の 1 または 10 分の 1 を引く必要がある場合があります)。丸めにより 100 パーセント)、すべてのズーム レベルで問題なく使用できるはずです。

これを任意にスケーリングできる CSS3 スケーリングと混同しないでください (実際、エッジが画面のピクセルに揃えられない可能性があります)。これは、レイアウトにまったく影響を与えないためです。

編集:例: パーセンテージを使用して列のサイズを変更する

#left-area { width: 66.3179%; /* 634/956 */ }
#right-area { width: 33.6820%; /* 322/956 */ }
于 2012-11-25T16:30:55.743 に答える
0

ブラウザーのサイズを変更すると、ピクセル値は必然的に丸められます。これにより、sidebarとleft-areaを並べて表示するのに十分なスペースがなく、ページの下部に表示されることがわかります。

の幅main-contentは 956px、left-area: 634px、sidebar: 322px です。

634 + 322 = 956。

ズームインすると、値は

633 + 321 = 954 > 953

ハードコーディングされたピクセル値には、この丸めの問題が発生する可能性があります。パーセントの使用を検討してください。

于 2012-11-25T16:41:01.567 に答える
0

トップ メニューでは、2 つの をにdivラップしてから、追加の CSS 宣言を使用して要素を に設定してみてください。絶対配置は、このような問題を修正するための優れたクロスブラウザーの方法のようです。ulposition:relativeul#megaposition:absoluteright:0

position:absoluteサイドバーには、とright:0を設定できますdiv#sidebar。

Safari の問題に対する思考プロセス 1:

トップメニューで「もっと見る」メニューの幅が違う場合は、 に設定ul#secondary-menuしてみてくださいposition:relative;z-index:11;。次に、 padding-left を のli.mmore子に追加して、いわば、他のul#megaズームの下で をスイープすることにより、さまざまなズームでさまざまなブラウザー幅の評価を補正できます。次に、色付きの線を広げるために、宣言を子からそれ自体に転送し、それに応じて高さを調整します。liliborder-bottomali.mmoreli.mmore

于 2012-11-25T16:30:22.030 に答える