一般的に使用されるさまざまなブラウザーでの getBoundingClientRect の分析_JavaScript スキル
まず、テスト コードに移動します
< !DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"
head>
<SCRIPT> <br>alert(document.getElementById("w3124"). getBoundingClientRect().top ); <br></SCRIPT>
、FF、Chrome: 208
IE カーネルの Maxthon: 215
ボディにマージンを追加した場合: 0、IE、FF、Chrome、Maxthon はすべて200ですが、TheWorld だけが 202 です
その後、HTML コードのヘッダーの DOCTYPE ステートメントが削除されると、FF、Chrome、Maxthon の値はすべて 200 になり、IE が Quirks モードになるため、次の値が 200 になります。今回は 202 ですが、TheWorld はまだ 202 です。
結論
FF、Chrome、および Maxthon は常に標準モード (標準モード) に従い、ステートメントを追加した後のみ、IE も標準モード (標準モード) に入ります。 TheWorld は常に Quirks モードを遵守しています。それは邪悪です。
提案
互換性を保つために、本文に margin:0;padding:0 を追加し、DOCTYPE ステートメントの追加に注意してください (これにより、IE は非常に従順になります)
別の:
1.記事全体にわたる緑の希望 誰もが目をリラックスできます。
2. ブログを投稿するのは初めてです。私の心は弱いので、何か間違っていることがあれば、謙虚に修正してください。
3. 参考文献

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

カードクーポンレイアウトのギャップ効果を実現します。カードクーポンレイアウトを設計するとき、特に背景が勾配である場合、カードクーポンにギャップを追加する必要があることがよくあります...

最近、Webページにローカルにインストールされたフォントファイルを使用して、インターネットから無料のフォントをダウンロードし、システムに正常にインストールしました。今...

なぜマイナスマージンが場合によっては有効にならないのですか?プログラミング中、CSSの負のマージン(負...

CSSでサイズ変更シンボルをカスタマイズする方法は、背景色で統一されています。毎日の開発では、調整など、ユーザーインターフェイスの詳細をカスタマイズする必要がある状況に遭遇することがよくあります...

CSSを使用してレスポンシブレイアウトを実装して、Webデザインのさまざまな画面サイズの下でレイアウトの変更を実装する場合、CSS ...

node.js環境でHTMLテキストコンテンツを取得するためにリクエストライブラリを使用する場合のコーディング例外の理由とソリューション。 node.jsを使用する開発プロセス中に、しばしば...

クロール中に58.com作業ページの動的データを取得するにはどうすればよいですか? Crawlerツールを使用して58.comの作業ページをrawったら、これに遭遇する可能性があります...
