各種常用瀏覽器getBoundingClientRect的解析

2024-05-06 14:15:22

字體：大中小

供稿：網(wǎng)友

先上測(cè)試代碼
代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>管理系統(tǒng)</title>
</head>
<body style="" onselectstart="return false;" >
<div id="w3124" style="border:1px solid #ff0000;position:relative;top:200px;left:400px;width:400px;">
</div>
<SCRIPT>
alert(document.getElementById("w3124").getBoundingClientRect().top);
</SCRIPT>
</body>
</html>

下面是alert結(jié)果
IE、FF、Chrome:208
IE內(nèi)核的Maxthon:215
IE內(nèi)核的TheWorld:217
當(dāng)body加上margin:0;padding:0 的時(shí)候IE、FF、Chrome、Maxthon下均為200,而只有TheWorld為202
然后把HTML代碼頭部的DOCTYPE聲明去掉的時(shí)候FF、Chrome、Maxthon值均為200，而IE由于進(jìn)入Quirks模式，此時(shí)的值為202，而TheWorld仍為為202
結(jié)論
FF、Chrome、Maxthon為始終堅(jiān)持標(biāo)準(zhǔn)模式（Standards Mode），IE在加了聲明后也進(jìn)入標(biāo)準(zhǔn)模式（Standards Mode），只有TheWorld始終堅(jiān)持Quirks模式，萬(wàn)惡！
建議
為了兼容把body加上margin:0;padding:0，注意加DOCTYPE聲明（有了它IE還是挺聽(tīng)話(huà)的）
另：
1.通篇用綠色希望大家眼睛能放松些。
2.小弟第一次發(fā)博客，心靈脆弱，無(wú)法承受各種打擊，如果有啥不對(duì)的，請(qǐng)指正，我一定虛心改正，拍磚請(qǐng)輕一點(diǎn)，謝謝啦
3.參考文獻(xiàn)

上一篇：鼠標(biāo)經(jīng)過(guò)的文本框textbox變色

下一篇：js 淘寶首頁(yè)的拼音排序效果