Maison interface Web js tutoriel 各种常用浏览器getBoundingClientRect的解析_javascript技巧

各种常用浏览器getBoundingClientRect的解析_javascript技巧

May 16, 2016 pm 06:52 PM
浏览器

先上测试代码

复制代码 代码如下:




管理系统




<script> <BR>alert(document.getElementById("w3124").getBoundingClientRect().top); <BR></script>



下面是alert结果
IE、FF、Chrome:208
IE内核的Maxthon:215
IE内核的TheWorld:217
当body加上margin:0;padding:0 的时候IE、FF、Chrome、Maxthon下均为200,而只有TheWorld为202
然后把HTML代码头部的DOCTYPE声明去掉的时候FF、Chrome、Maxthon值均为200,而IE由于进入Quirks模式,此时的值为202,而TheWorld仍为为202
结论
FF、Chrome、Maxthon为始终坚持标准模式(Standards Mode),IE在加了声明后也进入标准模式(Standards Mode),只有TheWorld始终坚持Quirks模式,万恶!
建议
为了兼容把body加上margin:0;padding:0,注意加DOCTYPE声明(有了它IE还是挺听话的)
另:
1.通篇用绿色希望大家眼睛能放松些。
2.小弟第一次发博客,心灵脆弱,无法承受各种打击,如果有啥不对的,请指正,我一定虚心改正,拍砖请轻一点,谢谢啦
3.参考文献 
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Comment réaliser un effet d'écart sur la disposition de la carte et des coupons avec fond de gradient? Apr 05, 2025 am 07:48 AM

Réalisez l'effet d'écart de la disposition des coupons de carte. Lors de la conception de la disposition des coupons de carte, vous rencontrez souvent la nécessité d'ajouter des lacunes sur les coupons de carte, surtout lorsque l'arrière-plan est le gradient ...

Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Comment afficher correctement le 'Jingnan Mai Round Body' installé localement sur la page Web? Apr 05, 2025 pm 10:33 PM

En utilisant récemment des fichiers de police installés localement dans les pages Web, j'ai téléchargé une police gratuite à partir d'Internet et je l'ai installée avec succès dans mon système. Maintenant...

Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Comment obtenir des données d'application et de visionneuse en temps réel sur la page de travail 58.com? Apr 05, 2025 am 08:06 AM

Comment obtenir des données dynamiques de la page de travail 58.com tout en rampant? Lorsque vous rampez une page de travail de 58.com en utilisant des outils de chenilles, vous pouvez rencontrer cela ...

Pourquoi deux éléments de blocage en ligne montrent-ils un désalignement? Comment résoudre ce problème? Pourquoi deux éléments de blocage en ligne montrent-ils un désalignement? Comment résoudre ce problème? Apr 05, 2025 pm 08:09 PM

Discuter des raisons du désalignement de deux éléments de blocage en ligne. Dans le développement frontal, nous rencontrons souvent des problèmes de composition des éléments, en particulier lorsque nous utilisons le bloc en ligne ...

Le style reste le même après les zooms de la page PC: quelles sont les solutions possibles? Le style reste le même après les zooms de la page PC: quelles sont les solutions possibles? Apr 05, 2025 am 07:51 AM

Le défi de garder le style de la page zoomé et le même après le zoom avant.

Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Comment personnaliser le symbole de redimensionnement via CSS et le rendre uniforme avec la couleur d'arrière-plan? Apr 05, 2025 pm 02:30 PM

La méthode de personnalisation des symboles de redimension dans CSS est unifiée avec des couleurs d'arrière-plan. Dans le développement quotidien, nous rencontrons souvent des situations où nous devons personnaliser les détails de l'interface utilisateur, tels que l'ajustement ...

Quelle est la raison de l'encodage des exceptions lors de l'utilisation de la bibliothèque de demande pour obtenir du texte HTML dans Node.js? Comment le résoudre? Quelle est la raison de l'encodage des exceptions lors de l'utilisation de la bibliothèque de demande pour obtenir du texte HTML dans Node.js? Comment le résoudre? Apr 05, 2025 am 07:03 AM

La raison et la solution pour coder des exceptions lors de l'utilisation de la bibliothèque de requêtes pour obtenir du contenu de texte HTML dans l'environnement Node.js. Pendant le processus de développement de l'utilisation de Node.js, il est souvent nécessaire de ...

See all articles