关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题

简介: 关于 getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取 documentElement 宽度比在 IE 浏览器下面多 4px 的问题

问题


最近我遇到了一个问题,用 document.documentElement.getBoundingClientRect 方法在360极速浏览器的 IE 兼容模式下获取到的宽度比在 IE 浏览器下面多 4px


效果对比如下图:


360极速浏览器的 IE 兼容模式下获取如下

2e008085cc1d4685ae66f1452fd5614b.png


IE 浏览器获取如下


55b988faf89140ad95d65874ebf9a81a.png



可能的原因

对此我有点不太理解,我看他们两个浏览器的 userAgent 都是一样的.

navigator.appVersion: (5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; .NET CLR 3.0.30729; .NET CLR 3.5.30729; rv:11.0) like Gecko),


经过一段时间的资料查找,并没有找到 getBoundingClientRect 的原理以及可能导致这个的问题原因。


所以,我找到张鑫旭大佬邮箱,描述了这个问题。


旭哥给出的可能原因是: 可能 360 浏览器在这个模式下自己加了些外边框吧。


ef2de348a913466f8b8494842aa36f76.png



拓展


对于360极速浏览器的兼容模式,真的一言难尽,另外可以看一下这个文章:

目录
相关文章
|
JavaScript 前端开发 小程序
js 实现浏览器下载视频2种方法
js 实现浏览器下载视频2种方法
2196 0
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
629 0
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
Web App开发 XML 开发框架
技术心得记录:在IE浏览器中的奇怪页面表现
技术心得记录:在IE浏览器中的奇怪页面表现
314 0
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
713 1
|
JavaScript 前端开发
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
386 0
VUE——如何兼容IE9|IE10|IE11浏览器
|
安全 网络安全
用IE浏览器访问网站提示证书错误
当你在Internet Explorer中遇到证书错误提示,通常是因网站SSL/TLS证书问题或浏览器安全设置需调整。解决方法包括: 检查时间设置 调整IE设置 安装证书 调整计算机时间
2034 3
|
移动开发 前端开发 JavaScript
解决浏览器兼容性问题的方法
解决浏览器兼容性问题的方法
|
域名解析 存储 缓存
HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口
【6月更文挑战第23天】 HTTP请求流程概览:浏览器构建请求行含方法、URL和版本;检查缓存;解析IP与端口;TCP连接(HTTP/1.1可能需排队);三次握手;发送请求头与体;服务器处理并返回响应;TCP连接可能关闭或保持;浏览器接收并显示响应,更新缓存。HTTP版本间有差异。
518 5