解决< meta name=“renderer” content=“webkit”>不起作用,从“步骤”开始看起。

一般只使用代码<meta name="renderer" content="webkit"> ,会有些浏览器会不起作用,所以在使用的时候,要完全兼顾。如果知道为什么使用这个标签,请直接从“步骤”开始查看。

为什么这么做

国产浏览器大多是双内核,甚至是三内核。一个Chromium内核,也就是Chrome使用的内核,切换到这个内核的模式一般叫极速模式;一个IE内核,称之为IE模式;有的甚至还有一个修改过的IE内核,称之为兼容模式。

这些浏览器这样做的原因是国内还有大量为IE浏览器量身定做的网站,为了兼容这些网站,不默认启用极速模式,而是根据代码判断选择IE模式或者兼容模式或者极速模式。

问题在于,浏览器自动选择经常判断错误,导致本来使用Webkit可以获得更好浏览效果的网站错误在IE模式中带着BUG运行。让开发者头疼。

幸好,现在多核浏览器已经支持通过meta标签指定浏览模式,那么,我们就可以通过meta代码强制浏览器启用Chromium内核,为用户提供最好的使用体验。

步骤

  1. 在网页头部标签内<head>添加以下代码:
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

三个都写上就不会出现 < meta name=“renderer” content=“webkit” > 不起作用的问题

  1. 这三行代码分别作用于不同环境,如下所述:
<!-- 强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/><!-- 强制Chromium内核,作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/><!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

低版本IE浏览器访问问题

添加好强制Webkit内核的代码,使用国产浏览器访问网站已经不存在IE兼容问题了,IE访客量将大大减少。但仍然不可避免会有一些老旧电脑通过低版本IE浏览器访问,如果我们专门为了这极小部分用户进行 CSS HACK ,将严重加重我们的工作量。

更何况自2016年1月起微软已经停止为IE11以下版本提供支持和更新,已经这么久没有更新,低版本IE不仅对CSS3和HTML5支持有问题,更有安全问题。

那么,我们不去支持低版本IE,这小部分用户怎么办呢?

我们可以使用 if IE 语句给网站添加IE升级提示,提示用户进行浏览器升级,或者切换更先进的浏览器再访问。

我们可以在刚刚的meta标签下添加一段跳转到IE升级提示页的代码(当IE版本低于IE11时跳转),实现低版本IE用户访问时提示他们进行升级或者更换浏览器。

强制Webkit内核和提示低版本IE访问用户升级完整代码如下所示,把这段代码添加到头部模板文件<head>标签下即可:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

(@cc_on 是 IE10 及更旧版IE特有的条件编译语句,因此可以用来判断是否除 IE11 以外的其他IE版本。)

因为低版本IE访问时因为不兼容CSS3和HTML5网站往往是错版的,添加了上面这段代码,当低版本IE用户访问时就会跳转到升级提示页,避免不必要的资源加载,降低网站服务器开销。

通过meta代码强制浏览器使用WebKit内核极速模式(解决 meta name=renderer content=webkit 不起作用)相关推荐

  1. 通过meta代码强制浏览器使用WebKit内核极速模式

    解决进入页面浏览器自动变成兼容模式. 解决< meta name="renderer" content="webkit">不起作用,从"步 ...

  2. 设置双核浏览器的浏览模式meta name=“renderer” content=“webkit|ie-comp|ie-stand”

    今天上知乎看到有人在上邀请我回答这样一个问题:如果访问的页面中有 CSS3 代码,双核浏览器会自动切换到 Webkit 内核吗?http://www.zhihu.com/question/200946 ...

  3. 用meta name=renderer content=webkit|ie-comp|ie-stand来切换360双核安全浏览器的极速模式和兼容模式

    以下信息摘自360官方网站: 浏览模式: 极速模式.兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式: 极速模式表示极速模式 兼容模式表示兼容模式 IE9IE10模式表示IE9/IE10 ...

  4. 设置双核浏览器的浏览模式 meta name renderer content webkit|ie-comp|ie

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 今天上知 ...

  5. 设置双核浏览器的浏览模式 meta name renderer content webkit|ie comp|ie

    分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 今天上知 ...

  6. 解决360浏览器兼容性问题的极速模式、兼容模式、IE11模式对同一页面的不同兼容性问题

    刚开始写页面的时候,会出现很多问题,当然兼容性问题是最不容忽视的.然而就在刚刚我写代码的时候,在谷歌运行的很好的代码,突然转到360的三种模式的时候,就出现了各种问题.然而我也各种找解决办法,终于还是 ...

  7. 360浏览器默认使用IE兼容模式解决办法

    使用360浏览器都是被优先选用兼容模式打开 若页面需默认用极速核,增加标签:<meta name="renderer" content="webkit"& ...

  8. 360安全浏览器,默认打开 极速模式。

    360极速浏览器的兼容模式下是IE几,这个是根据你电脑的装的IE版本是多少它就是多少, 它都是调用同一个内核,可能是设置了怪异文档模式:标准模式(strict mode)和怪异模式(quirks mo ...

  9. html5和极速模式,浅谈360浏览器6.0版本极速模式与兼容模式_蓝戒的博客

    360浏览器升级到6.0版本后对html5实现了全面兼容,于此同时360 6.0版本浏览器提供了两种模式:1.极速模式 2.兼容模式,也就是说360浏览器为双核浏览器.浏览器最核心的部分是渲染引擎(R ...

最新文章

  1. html 猫链接怎么写,html超链接下划线应该加入吗?
  2. AngularJS API之isXXX()
  3. phpcms后台系统怎么去掉html目录_电子笔记本 | 好记性胜过烂笔头?基于python3的知识管理系统...
  4. Ettercap内网渗透
  5. vscode使用php调试
  6. 2012三年大专计算机试题医学,计算机原理2012年4月真题(02384)
  7. python 自动化 在日历中选择时间-Python中Selenium选择日期(选择日历控件)的方法...
  8. 经典与科技碰撞之美!CGU 2018九段卡皇耀世登场
  9. 2018首届世界传感器大会11月12日-14日在郑州召开
  10. Spring @ResponseBody未生效,无法返回json数据 前端页面显示404
  11. 内网网段范围_局域网IP段有哪些 - 卡饭网
  12. Javascript - The same RegExp behave differently
  13. 网站QQ客服直接临时会话
  14. oracle ORA-28002:the password will expire within 7 days 解决方法
  15. Windows主机间批量操作的基本配置
  16. 三万文字透视前瞻:区块链及隐私计算在传统企业中的技术认知与进阶思考
  17. 泪目:我看不清你的脸,可我知道你在守护我平安
  18. 使用MDT2013部署Win8系统之八-通过MDT捕获镜像
  19. 【论文阅读】 Privacy-Preserving Byzantine-Robust Federated Learning via Blockchain Systems
  20. i18n调用自己参数_i18n国际化的例子

热门文章

  1. vb.net 教程 5-12 绘图实例之统计图 3 饼图
  2. 汽车以太网应用案例之DoIP刷写——让数据“飞”起来
  3. Analyzer脑电数据处理步骤
  4. Geotools中蜂巢的实现
  5. Redis | 26.Redis事务案例 - 秒杀 - 库存遗留问题
  6. 电器组装行业ERP解决方案
  7. 流媒体传输协议及音视频编解码技术
  8. 电影 -- 谍影重重
  9. python基础概念之-打印一个边长为n的正方形
  10. 更新:MapReduce编程之自定义序列化类及自定义排序2