踩坑浏览器自动翻译，自动添加font标签

最新推荐文章于 2022-08-04 16:27:38 发布
最新推荐文章于 2022-08-04 16:27:38 发布
阅读量719 收藏
点赞数 2
分类专栏： 工作随笔 web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sunny_night/article/details/112306411
版权
当HTML页面的lang属性被设置为'en'时，浏览器在翻译过程中可能会导致所有文本意外地被包裹在font标签内，引起样式错乱。解决此问题的方法是将lang属性更改为'zh'，避免浏览器的自动翻译行为，从而修复页面布局。
摘要由CSDN通过智能技术生成

问题描述：

明明什么都没有做，突然之前页面无法点击，样式错乱，打开浏览器调试工具发现，所有的文字外面浏览器自动加了一层font标签

原因分析：

html标签的lang属性，lang规定元素内容的语言。
页面中lang设置为en,浏览器自动翻译这个页面的时候，翻译的过程中会自动的给所有的文本套上font标签

解决方案：

修改lang属性为zh

sunny_night
关注
专栏目录
2024年Unity 面试题 |五萬字 二佰道| Unity面试题大全，面试题总结【全网最全，收藏一篇足够面试】
努力前行，总会成为自己心中的那道光
02-23 12万+
正所谓 金三银四 ，又到了找工作的大好时机了，不知道大家有没有意向找一份更好的工作呢~ 之前写了很多Unity的学习和实例文章，但是面试题部分还没有一个系统的整理。 那本篇文章就来整理一下Unity中一些常见的面试题，说不准就会面试的时候就会遇到！ 本篇文章会将Unity所有方面的面试资料都融会贯通，绝对是2022年Unity面试领域最实用的文章啦！
CSS、HTML、JS踩坑
JiangLittleBai的博客
06-28 353
1、写好的html元素li、img等之间出现间隙？ <!DOCTYPE html> <html> <head></head> <body> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"> <img src="./boyuanchong.jpg"> </body> </html> 比如直接
踩坑谷歌浏览器翻译插件自动创建<font>节点
皮皮虾大侠的博客
07-03 850
这两天被个奇奇怪怪的问题困扰，页面加载Dom结构后发现结构与预期不符，并且只有谷歌浏览器出现了这个问题，然后逐一排查，引用的各个js文件被屏蔽个精光弄成静态页面发现还是找不到问题所在，监测了下发现加载了谷歌浏览器翻译插件的相关js，然后把谷歌浏览器的翻译禁用掉，刷新看了下，问题解决。真坑，你翻译把innerText改了不就行了，非得插入个<font> 原结构 谷歌翻译插件处理后...
在vue中使用tinymce富文本编辑器（踩坑记录）
AngelSum的博客
01-15 4649
在vue中使用tinymce富文本编辑器（踩坑记录）准备基础设置上传图片和视频vue中的双向绑定图片一直显示为相对路径编辑器中输入的光标一直在前面 在开始这篇文章之前博主还用了quill和wangeditor，都算是比较轻量级的富文本编辑器了，不过功能也是超轻量级！而且用起来也不方便，尤其是自己在使用wangeditor时为了上传视频弄好久，最后发现尺寸也不好改！终于遇见了tinymce 相见恨晚，tinymce算得上是所见即所得，想要什么功能就直接在配置里面加就好了，人家都写的好好的，废话不多说 直接开始
页面自动添加font标签
WHY_222的博客
05-27 2405
问题描述： 使用vue的ref来获得dom节点中的内容，代码如下 <div id="app"> <div ref='hello' @click="handleClick"> hell0 WORLD </div> </div> <script> v...
1. web网站，自己添加font标签以及文字
小武的博客
06-15 718
如下图所示：（本来是预警，但是他自动添加上去初步两个字） 解决方法： 找到项目中的 ： <htmllang="en"> 把他改为： <htmllang="zh"> 或者把该属性去掉 本文参考地址：https://www.cnblogs.com/DongZixin/p/11979517.html ...
谷歌浏览器最坑爹的一个Bug之为什么我的span标签里多了font标签
du_5pet的博客
11-19 952
项目中遇到一个问题我要给后台传span标签的内容，结果在谷歌浏览器上测试莫名其妙多了一些font标签， 搜索了一下竟然是因为谷歌浏览器的翻译功能？？？？？？？？？？？ 所以谨记纵使不用这翻译功能也要记得勾选“一律不翻译此网站”。。。。免得被坑。 在网上还搜到有个方法会避免此错误的发生，就是在html页面的开头 写这样<html lang="zh">而不是<html la...
谷歌浏览器试调网页 多出font标签
05-16 687
突然发现一些按钮的点击功能失效，在控制台发现该a标签中多出个font标签，导致文字区域不能触发到a标签 就算a标签宽高设置百分百 也没用。 经测试不同的浏览器情况不一样 safari就不会出现这种情况 原因：在html头部申明的时候是这样写了<html lang="en"> ，导致浏览器自动去翻译这个页面成英文，翻译的过程中会自动的给所有的文本套上font标签 解决...
vue项目在谷歌浏览器中莫名被更改了内容和出现font标签
weixin_49295874的博客
03-01 360
先说明原因：被浏览器 翻译 了。 谷歌浏览器一直是默认翻译成中文的设置，而我的默认声明为英文，lang="en"会被翻译。 所以当浏览器选择翻译时，就会出现上面的情况。 解决办法： 将index.html文件的html标签的语言类型声明为中文 ...
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
yilingsj的博客
06-02 7634
公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript
vuecli4+vant移动端响应式项目踩坑记录
Beauty_zhang666的博客
05-17 5644
文章目录关键词参考链接一. 使用vue/cli4二. 使用vant三. 加入响应式布局1. rem适配插件2. PostCSS配置四. 图标库：封装svg图标组件1. 建立如下目录结构：2. components/SvgIcon.vue3. icon/index.js4. 配置vue.config.js5. svg图标使用五.axios+api封装目录结构(示例)http.js封装api/index.jsapi/user.jsapi注册到全局(main.js文件)api接口调用示例App.vue（断网代码示
解决html文字被篡改，并且额外添加font标签，显示成其他内容
Julie_Go的专栏
09-28 1371
无意中QA提出了这么一个问题，页面原本的文字被莫名其妙的替换了（如下图红框中），检查了接口和源码中没有这些文字，注：电脑是否中毒不在关注范围内 审查元素发现原本文字所在的位置，被额外添加了font标签 到这里就破案了，是无意中开启的谷歌浏览器的翻译功能在作祟 1、关闭翻译插件、或者结合html标签的网页语言类型声明，把翻译语言改回设定的就正常了 比如这样： <!-- 声明当前网页的语言类型为中文 --> <html lang="zh"> 或者这样 ： ..
诡异的小bug 自动生成font标签包裹span标签中的文字
weixin_30492601的博客
08-30 780
某天测试自己写的网站的时候突然发现页面上一些文字排版出现了一些奇怪的错乱，在控制台发现错乱的文字被font标签包裹着 ，但是代码中根本没用用到font标签 后来发现是因为自己不小心点了谷歌浏览器地址栏的一个翻译此页面的功能 解决方法：1.取消浏览器 ”翻译该页面“ 当然一般人不会遇到这种神奇的问题 没事谁会去翻译自己写的...
记录一个很狗的问题，浏览器自动翻译导致vue项目页面数据等出错
csl125的博客
05-31 1496
在开发vue项目中发现，上线项目莫名其妙页面功能不能使用，但是本地都是ok的，然后排查发现是由于谷歌浏览器自动翻译，导致把项目原有的标签dom替换了，会包裹font标签等，
【input输入框回车生成标签】vue简单实现input输入框内输入后回车创建一个标签功能【详细注释版本】
seeeeeeeeeee的博客
08-04 5704
这个功能很多地方会用到，比如我们的csdn发文章发问题就用到了这个功能。一个输入框内输入你想要的标签，然后回车就会创建出来一个标签，这个标签也是在这个输入框的里面的。我网上看了下，这种功能帖子没看到几个，这里就整理一下，写一个帖子。......
解决contenteditable内自动生成font标签问题
itlsq的博客
12-05 1433
问题描述： div设置了contenteditable之后，如果里面存在代码块，且有背景颜色，那么在刚删除此带背景颜色区域的时候，立刻输入文本，新输入的文本也会默认带着颜色（想要的效果是新输入的文本不带任何样式），通过F12查看发现生成了font标签，且继承了刚才删除的代码块的背景色。 将上面“这是主诉的值“删除，删除后紧接着输入新文本“这是新输入的值，应该是纯文本的“ 通过上面发现，删除带有...
vue 改变html font,html页面文字被额外添加font标签，导致vue双向绑定失效
weixin_35398679的博客
06-22 616
前端页面文字被额外添加font标签，导致vue双向绑定失效问题现象描述页面源码chrome 调试element面板结果对比源码和调试结果我们发现，我们的文字内容“你好世界”被font标签包裹住了，而这个在我们的源码里面是没有的，可见这个font标签是由浏览器生成的(因为我们的页面没有执行任何js代码)，最终通过百度查询资料发现，原来这个font标签是由chrome 翻译插件生成的，如图既然我们知道...
html设置阻止网页在google浏览器中打开时弹出自动翻译框
lingliu0824的博客
02-09 5905
想要阻止网页打开时弹出上面的翻译窗口，有两种设置方式： 1.（建议）在html文件的head标签中添加meta标签： <meta name="google" content="notranslate" /> 2.设置html标签lang属性为zh-CN(简体中文) <html lang="zh-CN"> ...
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
spapple的博客
07-28 1051
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
ueditor 编辑器增加css样式_UEditor踩坑记：解决自动添加<p>标签的方法
最新发布
06-07
为了在UEditor编辑器中增加CSS样式，可以通过以下步骤来实现： 1. 打开UEditor的配置文件，一般来说是config.js文件。 2. 在“UEDITOR_CONFIG”对象中添加如下代码： ```javascript // 自定义样式 , 'customstyle':[ { tag:'h1', name:'tc f-26 lh-66', label:'大标题', style:'border-bottom:2px solid #000;font-size:26px;padding:26px 10px 10px;margin:10px 0 20px;' }, { tag:'h2', name:'tc f-20 lh-48', label:'中标题', style:'border-bottom:1px solid #ccc;font-size:20px;padding:10px;margin:10px 0 15px;' }, { tag:'p', name:'tc f-14 lh-30', label:'段落', style:'font-size:14px;line-height:30px;padding:10px;margin:10px 0;' } ] ``` 以上代码中，我们定义了三种自定义样式：大标题、中标题和段落。其中，每种样式都包括了标签、名称、标签显示的文字和CSS样式。 3. 在配置文件中找到“UEDITOR_CONFIG.toolbars”对象，找到需要使用自定义样式的工具栏按钮，例如“字号”按钮，将其配置修改为： ```javascript ['fontfamily', 'fontsize', '|', 'customstyle', 'bold', 'italic', 'underline', 'forecolor', 'backcolor', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'insertimage', 'insertvideo', '|', 'removeformat', 'source'] ``` 4. 保存配置文件，重新加载页面，即可在编辑器中看到自定义样式按钮。选中需要应用样式的文本，点击对应的按钮即可。 至于自动添加<p>标签的问题，可以在配置文件中找到“UEDITOR_CONFIG.filterRules”对象，将其中的“p”标签过滤规则删除即可。具体代码如下： ```javascript , filterRules: { // <!-- 过滤的标签 --> tagNames: { style: true, script: true, div: 1, p: 1 }, ... } ``` 将其中的“p: 1”删除即可。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值