2011-11-29 2 views
1

私は、デスクトップを含むかなり小さなブラウザサイズに縮小するためのページを作っています。私はかなり多くのブラウザのためにFirefoxを持っていますが、他のブラウザと同じようにコンテンツを小さくすることはできません。あなたはどのブラウザでもなく、Firefoxの、あなたは540pxより小さいにウィンドウのサイズを変更すると、あなたが期待するよう、div要素は、小さくなることをしようとした場合Firefox 8.0は他のブラウザのようにコンテンツのサイズを変更しません

<body> 
    <div style="width:auto; max-width:500px; margin:20px;background-color:black;"> Some filler text </div> 
</body> 

は、私はこのような単純なページを持っていると言います。しかし、Firefoxでは、そんなことはありません。少なくとも8.0にはありません。 divを小さなサイズにリサイズした後、スクロールバーを残さずにウィンドウから伸びます。

この現象を回避する方法はありますか?

編集:私はこれもFirefoxの古いバージョンで再現しましたが、私は奇妙なものを発見しました。 divのサイズを少し変更したと言いましたが、ここでは何が起こるのですか?ページの本文は367pxの幅にとどまります。 Firefoxの2つの異なるバージョン、Windowsの2つのバージョン、同じ番号。

+0

「幅:100%」は同じですか? – Filip

+0

本来、そうです.100%の代わりにautoを使用すると、ブラウザは余白やパディングなどを考慮に入れます。ブラウザの幅が500pxで、divの幅が100%で、余白が20pxの場合、ブラウザのページ幅は40pxになります。 autoでは、余白を考慮に入れてdivを460pxにリサイズする必要があります。 – Indigenuity

+0

OSXのFirefox 8.0.1ではこの問題は発生しません。 – bookcasey

答えて

2

Firefoxの場合、ブラウザウィンドウのサイズを変更する際に、正確なテーマや拡張機能に応じてブラウザのコンテンツ領域のサイズが変更されないことがあります(たとえば、最も広いツールバーのさまざまなボタンユーザーインターフェイスのレイアウト方法のためにコンテンツ領域に最小幅を課します)。

これは、ボディーがサイズを変更しないのを見る理由です.CSSビューポート自体はサイズを変更していません。ページに垂直スクロールバーがある場合は、ブラウザUIの一部が消えるように、ウィンドウの右端からスクロールバーが消えることがわかります。

これをテストするために必要な場合は、十分なツールバーのカスタマイズ(たとえば、ツールバーのすべてを削除)で対処することができます。一方、テストのためだけにこれを必要とする場合は、おそらくiframeでサイトをロードすることができますが、あなたが望むサイズを選択します。

+0

これは本当です。私にとっては、コンテンツエリアのサイズを、ユーザーごとに大きく異なるツールバーではなく、ウィンドウサイズに合わせることがより良い考えであると思われます。また、ウィンドウのサイズが変更された場合、半分隠される可能性があります(ツールバーが大きい場合は狭すぎる必要はありませんが)狭くする必要があります。さらに、今のように、水平スクロールバーも隠されてしまいます。 – Indigenuity

+0

もちろん、サイズ変更の動作はFirefoxフロントエンドコードのバグです。これは数回修正されましたが、他のユーザーがUIを並べ替えると再び現れます。 –

0

"width:auto" vs " "width:100%"を設定することができますが、まだコメントできません...

「幅:100%」を設定し、「ボックスサイズ:枠線」私が信じているベンダーの接頭辞を使用する必要があります-moz-と-webkit-。それがあなたに問題を解決するかどうかは分かりませんが、知っておくとよいでしょう - 多分それを試してみて、何が起こるか見てみましょう。

関連する問題