0

Meebo チャット バーは小さくて目立たないバーです (いくつかのサイトが配置するオプションのポップアップは数えません - ベース バーはかなり目立たないものです)。 JavaScript の行。具体的には、「ビューポートの下部」のポジショニングをどのようにうまく機能させ、一貫して、ちらつきやクロスブラウザーの他のアーティファクトなしで機能させるかに興味があります.

Meebo ソリューションは、IE であってもページに特定の DOCTYPE を必要としないことに注意してください。これが重要です。私が求めているのは、タグまたはタグを挿入するコードを追加する以外に、ホスティング ページを制御しなくても、ビューポートの下部のツールバーを機能させる方法です。CSS Fixed だけでは、IE Quirks モードでは適切に機能しないため、受け入れられるソリューションではありません。

また、例として Meebo バーについて言及していますが、実際にはソーシャル ツールバーを探しているわけではないので、Meebo だけを使用することはできません。

必要なブラウザー サポート - Meebo は次のすべてをサポートしていることに注意してください: IE6、IE7+、Firefox、Safari、Chrome。まったく表示されない (ただし、ページがまったく壊れない) ことは IE6 では許容されますが、もちろん、(Meebo のように) IE6 で正常に動作することが優先されます。Opera などの他のブラウザもあると便利ですが、必要なブラウザのリストは上記のとおりです。

4

2 に答える 2

6

簡単な答えは、Quirks モードと IE6 では、CSS 式の力を利用して要素の位置を動的に計算することです。nwellcome が指摘したように、私たちは各ブラウザーにターゲットを絞った CSS ファイルを提供するため、*/_ バグやその他の奇妙なブラウザー ターゲット ハックを悪用することなく、この動作を実装できます。

さらに、IE レンダリング エンジンの興味深い動作を利用します。HTML または Body 要素に background プロパティが設定されている場合、IE は再描画の前に固定要素の位置を計算します。これにより、スクロール/サイズ変更時に要素を再配置する JavaScript ベースのアプローチで通常見られるちらつき動作が大幅に削減されます。

このサイトでは、すべての主要なブラウザーで position:fixed を実装するためのソリューションの優れた概要を提供しています: http://www.howtocreate.co.uk/fixedPosition.html

また、ちらつきの問題に対するかなり独創的な解決策についても言及しています。

これが役に立ったことを願っています！

于 2011-11-02T19:10:17.273 に答える
1

そのページを見ると、デフォルトの解決策は位置固定を使用することですが、関連する情報 (ブラウザー、バージョンなど) からこれらのリソースの URL を構築することにより、特定のブラウザーごとに大量の CSS と JavaScript をロードします。 head 要素の style および script 要素としてそれらを記述/追加します。

IE7 を quirksmode にすると、JavaScript を使用して継続的に div の位置を変更していることがわかります。私のマシンでは、少なくとも再描画によるちらつきがひどいですが、これが最善の方法であり、残りの部分への侵襲を最小限に抑えることができます。ページ。その他の quirksmode の位置固定の回避策には、要素をビューポートに対して絶対的に配置するように設定することが含まれます。これにより、ページ上の他のすべての絶対配置が台無しになります。

于 2011-11-01T15:32:24.543 に答える