百度翻译插件在chrome浏览器中自动生成dom元素影响高度的bug

最新推荐文章于 2022-07-07 23:03:46 发布
最新推荐文章于 2022-07-07 23:03:46 发布
阅读量409 收藏
点赞数
分类专栏： 前端学习 文章标签： chrome javascript css web css兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mistywood/article/details/105251401
版权

最近一段时间做各种项目，我的页面总是比别人多出一点高度，导致浏览器显示y轴滚动条，多次测试后发现，这个滚动条只在chrome浏览器里出现。
结果发现是chrome装的百度翻译插件导致的，自动生成了一个页面元素，这个元素有13px的高度
在此感谢论坛大佬对我提供的帮助这是我发的求助帖
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这段代码是外部的js对DOM操作而产生的，我去看了源码，js/trans-src.js中的这段代码生成了dom，具有13px，导致了页面多出一段高度
在这里插入图片描述
特意装了360来使了一下，360的百度翻译插件不会生成这段dom，简单对比了一下源码,360也操作了dom，不过多了一个none，按理来说也会生成这个dom，不知道为何只有chrome有。以目前我的水平大概是看不出原因来，希望以后能有机会解决这问题。
在这里插入图片描述

现在先换个翻译插件吧

MistyWood
关注
专栏目录
Chrome浏览器百度翻译插件存在底部15px间隙的坑
Jack_13201的博客
10-15 254
由于本人是个英语渣，开始使用着一些翻译工具，电脑上安装了百度的翻译插件（Chrome版）。 创建vue项目的时候，运行登录界面，在设置宽高了100%后，底部莫名的出现15px的边距，产生了竖向滚动条 我是左看css样式，右看html结构，重新构建了也不行。依然莫名多出了一段代码 查找终极原因，枪毙了所有的谷歌插件，问题解决了，针对各个插件试了一下，锁定是百度翻译插件产生的15px底边距，难受！...
谷歌Chrome浏览器自动翻译导致前端页面数据错乱问题
Destroy_h的博客
08-06 1067
Html body标签内数据和页面展示数据不匹配（避雷） 浏览器的自动翻译会影响页面数据展示 因为我呢用的谷歌浏览器，有时候需要查看英文文档，平时会开着自动翻译翻译，如图： 然后今天在写网页的时候发现了这个问题 如图，在翻译为中文状态下，我在body标签内的span标签内写的是“很棒”，保存后刷新页面他会闪一下很棒，之后就会变成“很干净”， 这应该是CSS样式吧，我在CSS里面没写，可能是默认，有懂得朋友给我留言下。 这是原网页的状态下，显示是正确的。 ...
网页嵌入谷歌翻译js插件
Cdeeffq的博客
01-11 4001
<html> <body> 我爱你 <!-- 把button放在右下角，这个是可以随意修改的，你可以改成一个链接一个图片之类的 --> <div id="google_translate_element" style="position:absolute;bottom:10px;right:10px;z-index:2000;opacity:0.7"&...
safari 翻译网页_苹果手机怎样快速翻译网页？利用Safari有妙招！
weixin_32440005的博客
01-17 1943
大家好！欢迎收看App收集狂，我是重度患者三木。相信大家在日常使用苹果手机时，经常会遇到英文单词或者整个页面全是英文，像这样：旧金山纪事报那么今天三木告诉大家怎样快速有效的进行单词或者网页的翻译。首先，如果遇到单个单词不会，只需要利用苹果自带的词典功能就能做到即时翻译：1.长按需要翻译的单词：2.选择查询，即可跳出相应的查询页面：3.不止浏览网页时，苹果自带的词典功能基本支持所有的文本输入环境。如...
踩坑浏览器自动翻译，自动添加font标签
sunny_night的博客
01-07 727
问题描述： 明明什么都没有做，突然之前页面无法点击，样式错乱，打开浏览器调试工具发现，所有的文字外面浏览器自动加了一层font标签 原因分析： html标签的lang属性，lang规定元素内容的语言。 页面中lang设置为en,浏览器自动翻译这个页面的时候，翻译的过程中会自动的给所有的文本套上font标签 解决方案： 修改lang属性为zh ...
Angular 基础教程（7.0）
GitChat
11-26 7231
课程亮点 按照初学者的学习路线规划内容 所有代码均采用 Angular 7.0 版本 覆盖日常开发中使用频率最高的特性 To B、To C 型界面，移动端 PWA 全面覆盖 附赠 3 个附录，对比 5.0、6.0、7.0 版本 读者反馈 《Angular 初学者快速上手教程》课程发布已有一年，期间收到了很多读者的留言，这里摘录几条，仅供参考。为了不打搅这些朋友，部分采用了匿名。 课程背景 本...
Android开源经典项目
Tamic （大白）
09-13 5752
Android开源项目大全，包括经典个人博客，组织和开源项目
前端主流面试官必问超详细面试题(整理完以秃头)持续更新中
qq_43375584的博客
07-07 4008
CDN利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。CDN的作用：（1）在性能方面，引入CDN的作用在于：（2）在安全方面，CDN有助于防御DDoS网络攻击：懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。 比如：在较长的网页中。如果有很多图片，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。如果我们使用图片的懒加载就可以解决
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
【CEP 扩展开发一】简介
小陈的博客
05-11 1737
写作目的 Adobe 毫无疑问是设计软件行业的垄断级巨头，旗下的 PS，AE 等都是搞设计和自媒体的必装软件。有很多小公司的产品其实本质上是依赖这些设计软件生存的，例如开发 AE 特效插件的公司，例如使用 PS 开发海报模板的我司。 其实 CEP 扩展的开发生态是相当的恶劣，中文资料不能说少，简直可以说是没有，质量不错的一只手可以数得过来。国外的资料相对多一点，但还是很少，主要还是以论坛，github 仓库, stackoverflow 提问的形式散落在各处，大多数文章的内容也很浅。 笔者将近一年时间的主要
Mac电脑使用：Mac电脑如何用自带的Safari浏览器，一键翻译英文网页为中文网页
热门推荐
软贱开发攻城狮
04-08 14万+
昨天早上在地铁上的时候，突然想起来之前遇到的一个情况，就是如何翻译苹果官方API的，然后后来一直没有用就忘记了，现在突然想起来了，就分享一下怎么翻译英文的网页，包括翻译苹果官方API的英文内容为中文。 网上大部分的一键翻译英文为中文的教程都是说Windows系统的情况，我介绍的是Mac系统的电脑一键翻译英文网页为中文的方法步骤，希望能够给有需要的人士带来帮助。 具体步骤很简单，就需要下载一个翻...
google chrome 调试技巧：监控 DOM 元素被修改
@惊蛰的博客
05-09 1481
在很多时候， 页面上一个元素的属于被修改、删除，子节点的添加与修改，很难一下找到对应的代码，在 google chrome 开发者工具里， 提供了对 DOM 元素的监控： 在 Elements 标签, 右击有监控的元素，在弹出来的菜单中有一个 Break on 的菜单项， 下面有三个子菜单项 subtree modifcations: 监控当前元素子级元素结构的变化，添加结点和删除节点，移动节点不知道算不算。 attribute modifcations: 监控当前元素属性的变化。 node remova
分享一个去广告的浏览器插件
Zack_Qin的博客
01-24 5925
国内百度不知道使用了什么手段把谷歌挤出了大陆，可是百度利益熏心，类似的魏则西事件不胜枚举，罄竹难书。所以推荐一款去广告的浏览器插件，适用于各种浏览器。网址是 https://adblockplus.org/...
Mac 上用 Safari 一键轻松翻译网页
Mill米尔视觉创意
10-30 1万+
很多人在浏览网页时，喜欢使用 Google Chrome 的一个功能就是 Google Chrome 可以直接翻译外文网页，让个网页的外文变成中文，方便阅读与理解网页内容，现在 Mac 上的 Safari 也有翻译网页的功能，只需一键就可轻松翻译外文网页。 Mac 用 Safari 也能翻译外文网页 Mac 上的 Safari 目前也支援翻译外文网页啦，Safari 会分析外文网页上的语言，用户可以使用自己设定的偏好语言翻译该网页，让用户拥有更好的网页阅读体验与提升对网页内容的理解。 苹果官方也.
苹果手机怎样快速翻译网页？利用Safari有妙招！
weixin_42600522的博客
07-17 9241
大家好！欢迎收看App收集狂，我是重度患者三木。 相信大家在日常使用苹果手机时，经常会遇到英文单词或者整个页面全是英文，像这样： 旧金山纪事报 那么今天三木告诉大家怎样快速有效的进行单词或者网页的翻译。 首先，如果遇到单个单词不会，只需要利用苹果自带的词典功能就能做到即时翻译： 1.长按需要翻译的单词： 2.选择查询，即可跳出相应的查询页面： 3.不止浏览网页时，苹果自带的词典功能基本支持所有的文...
qq浏览器网页翻译_让你的safari浏览器自带一键翻译网页功能
weixin_39637386的博客
10-19 528
因公众号的推送机制已改变，很可能看不到小D最新的文章。建议大家把公众号置顶(加星标✨)，这样就不会错过更新通知和实用技巧啦！前言昨天有部分小伙伴留言找不到微软翻译，已重新完善小D认为PC端的谷歌浏览器算是浏览器界最NB的一款神器了，没有之一！其有一个最厉害的功能就是自带翻译。小D曾经用过其他浏览器都没有谷歌浏览器翻译好用。说到ios端，关注小D的小伙伴估计safari浏览器已经用习惯了...
解决IE和谷歌浏览器下div高度问题
weixin_30551963的博客
01-08 590
IE浏览器下DIV不设定高度，其会随着子内容的增加而增加， 但是谷歌浏览器却不可以，父DIV不会随着子DIV内容的增加而增加。 这点让大家非常的感到反感，搞了半天终于是搞定了，特将方法写出来，希望对大家有所帮助。 首先，先报抱怨几句：“谷歌啊，你搞什么东东，这点确实没有IE智能，哥不想说你。还整天说什么云浏览器。可能吧，这就是云，俺的云（DIV)都在上面飘着呢。……” 方法如下： &lt...
safari网页翻译
11-24 1599
方法一：       1、按快捷键⌘D，先把任意一个网页添加到“个人收藏栏”中。       2、右键点击“个人收藏栏”中刚添加的网页链接按钮，点击“编辑地址”：       3、拷贝以下文本，粘贴到编辑地址栏的文本框中，点击“完成”： javascript:(function()%7Bvar%20s%20=%20document.createElement('script')
Chrome DOM操作教程
ALiang
05-05 1633
编辑DOMChrome DevTools Elements(元素)面板中的DOM树视图显示当前网页的DOM结构。通过DOM更新来实时编辑您的网页的内容和结构。TL;DRDOM定义了页面的结构。每个DOM节点都是页面元素，例如，头部(header)节点，段落(paragraph)节点。通过渲染的DOM来实时编辑你的网页内容和结构。但请记住，你不能通过Elements(元素)面板中的DOM更改来修改源文件。重新加载页面会清除DOM树任何的修改。使用DOM断点监视DOM的更改。检查一个元素这里有几种方法来检查一个
Chrome浏览器中的Axure原型查看插件
资源摘要信息:"Axure浏览器插件是一款专门用于在浏览器中查看Axure RP制作的原型的插件。由于Axure RP是一款专业的原型设计工具，它允许设计师创建交互式的原型，而这些原型通常用于团队内部沟通或者用户测试。然而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值