关于 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极速浏览器的兼容模式,真的一言难尽,另外可以看一下这个文章:

目录
相关文章
|
9月前
|
存储 前端开发 开发者
|
9月前
|
Web App开发 iOS开发 MacOS
如何在浏览器中启用夜间模式?
【10月更文挑战第10天】
|
5月前
|
数据采集 Web App开发 存储
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
本文介绍了基于无界面浏览器(如ChromeDriver)和代理IP技术的现代爬虫解决方案,以应对传统爬虫面临的反爬机制和动态加载内容等问题。通过Selenium驱动ChromeDriver,并结合亿牛云爬虫代理、自定义Cookie和User-Agent设置,实现高效的数据采集。代码示例展示了如何配置ChromeDriver、处理代理认证、添加Cookie及捕获异常,确保爬虫稳定运行。性能对比显示,Headless模式下的ChromeDriver在数据采集成功率、响应时间和反爬规避能力上显著优于传统爬虫。该方案广泛应用于电商、金融和新闻媒体等行业。
332 0
深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作
|
10月前
|
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浏览器中的奇怪页面表现
147 0
|
9月前
|
JavaScript 前端开发
|
9月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
262 0
|
10月前
在masm32中获取IE版本的方法2
在masm32中获取IE版本的方法2
|
10月前
在masm32中获取并显示IE版本的方法1
在masm32中获取并显示IE版本的方法1
|
11月前
|
JavaScript
VUE——如何兼容IE9|IE10|IE11浏览器
VUE——如何兼容IE9|IE10|IE11浏览器
252 0
VUE——如何兼容IE9|IE10|IE11浏览器