兼容ie8及其以上IE浏览器,360浏览器,QQ浏览器等双核浏览器。
最近写页面的时候(只做PC端,有兼容),公司要求兼容IE8及其以上IE浏览器,firefox,和360,QQ等双核浏览器。由于之前没搞过兼容,所以,自己搞起来也是相当头疼。上网查了资料,有好使的,也有不好使的。为了方便以后查看,今天就记录下自己的心得。有不正之处,还请指教。
强制使用高版本内核渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
- 首先,
X-UA-Compatible
是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。上面代码告诉浏览器:对于IE8/9以上浏览器,用IE最新的Edge引擎渲染页面(当然了,前提是你电脑里装了Edge)。对于chrome=1来说,
如果安装有chrome插件,则走插件。
<meta http-equiv="X-UA-Compatible" content="10"/>
- 强制页面使用IE10引擎渲染页面。
条件注释(css hack方法之一)
有人会试图使用<!–-[if!IE]>来定义非IE浏览器下的状况,但注意:条件注释只有在IE浏览器下才能执行,这个代码在非IE浏览下非单不是执行该条件下的定义,而是当做注释视而不见。当然,根据条件注释只能在IE5+的环境之下
<!--[if IE 8]>coding...<![endif]-->
//ie8
<!--[if lte IE 8]>coding...<![endif]-->
//小于等于ie8
<!--[if gte IE 8]>coding...<![endif]-->
//大于等于ie8
需要引入jq库的页面要注意,jq从2.0版本就不支持IE8了,最后一个支持IE8的是1.9。
引入jq可如下这样引入:
<script src="../jquery/jquery-3.3.1.js"></script><!--[if IE 8]><script src="../jquery/jquery.min.js"></script><![endif]-->
说明:如果是IE8,则加载jquery.min.js,并且覆盖了前面的3.3.1。否则,只加载3.3.1。
使用meta标签针对360,QQ等双核浏览器
首先,这些浏览器都有2种浏览模式,兼容模式,极速模式。默认为极速模式。
<meta name="renderer" content="webkit">
此代码360 6.x以上可识别。强制浏览器使用Webkit内核渲染页面<meta name="force-rendering" content="webkit"/>
其他双核浏览器识别。强制浏览器使用Webkit内核渲染页面
css书写时注意
1.选择器不要用CSS3的,如:.partner-pic:nth-child(1)
。
2.颜色不要用rgba,用带#的。
title标签在IE8设置不了
网上查资料发现,title标签的innerText
只读,不能设置。IE9以上可以。
解决办法:document.title = 值
,该方法兼容火狐,谷歌。
css hack针对不同浏览器编写不同的代码
(这个我基本没有用到,仅做参考)
我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本写特定的CSS样式,我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!
- 类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。 - 选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
具体参考:https://blog.csdn.net/freshlover/article/details/12132801
另外,在填充盒子内容时
1.不要将高度定死了,高度应该由内容撑开,然后加个padding-bottom,不仅背景色可以渲染到,而且是可以与其它盒子隔开点距离。
兼容ie8及其以上IE浏览器,360浏览器,QQ浏览器等双核浏览器。相关推荐
- Selenium Java启动国内Chromium系浏览器360、QQ等
Selenium Java启动国内Chromium系浏览器360.QQ等 近期有同学有需求,他们要求只能在国产浏览器如360.QQ等上进行测试. Selenuim支持谷歌Chrome浏览器我们都是知道 ...
- 洋葱浏览器Tor Browser for Mac(极速双核浏览器)中文版
洋葱浏览器(Tor Browser)中文版是一种基于铬浏览器内核同时兼容IE浏览器内核的极速双核浏览器,采用铬与ie双内核,其最大的特点就是具有超强的匿名浏览功能,能够完美隐藏用户的IP地址,通过更多 ...
- 用Meta标签代码让360双核浏览器默认极速模式打开网站不是兼容模式
我开发了一个网站,大量采用了html5和css3,希望用户都以webkit内核打开页面,但是测试却发现360的以ie内核打开为推荐模式,不知原因为何.其实360给网站开发者设计了一种选择的方法,只要加 ...
- 单核浏览器和双核浏览器有什么区别,哪个好用?
很多用户对电脑浏览器内核有要求,在电脑浏览器中,单核浏览器和双核浏览器这两者有什么区别,哪个更好用呢?下面为大家整理单核浏览器和双核浏览器各自的优缺点,有需求的用户可以根据个人喜好,结合单核双核浏览器 ...
- 关于双核浏览器的疑问
关于双核浏览器,当访问时浏览器所自动选择的访问模式,兼容表示使用WebKit内核,高速表示使用Trident内核. 上述表述是否有误? 是否应为:兼容表示使用Trident内核,高速表示使用WebKi ...
- bootstrap和css样式兼容(ie、360、qq)不同浏览器的解决办法
一.作为一个之前没有真正实践项目的前端新手,这次在实践的时候就发现了一个严重的问题--兼容性. 开发者在前端开发,调试的时候,使用的基本都是谷歌.火狐这种开发者浏览器,忽略了其实我们国内主流的浏览器仍 ...
- js导出word文档 可以兼容IE8+浏览器适配其他浏览器
js导出word文档,兼容IE8浏览器 其他浏览器需要引入两个文件:FileSaver.js 和 jqueryWordExport.js 需要兼容IE8浏览器需要引用:FileSaver.js exc ...
- 让Bootstrap 3兼容IE8浏览器
看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说.有几个点大家要注意. 1.本地调试需要Web Server(如IIS.Apache,Nginx),单纯地本地打开文件不能看到兼容效果. 2 ...
- js层级轮播图兼容IE8及以上浏览器
预览 本轮播图兼容ie8+浏览器,精华部分js+css,什么定时轮播,什么旋转,全部实现! html代码 <div class="box"><div class= ...
最新文章
- 大数据与智能算法(二-应用级技术)-SMU在线学习笔记
- 6.1-6.4 gzip、Bzip2、xz
- Mac搭建Lua运行环境
- 【简洁代码】1028 List Sorting (25 分)_26行代码AC
- java入门应该学什么_初学Java应该掌握哪些基础知识?
- Scala与Java差异(六)之类定义
- 在日本山区流域使用支持向量机和 bagging、boosting 和 stacking 集成机器学习框架改进滑坡评估--文献阅读
- python 获取文件大小_第41p,超级重要,Python中的os库
- python tk combobox设置值为空_Python编程从入门到实践日记Day24
- mysql —— 分表分区(1)
- mac Sourcetree 账号密码输入错误后, 重新输入的方法
- V4L2驱动程序架构
- Python调用QQ截图工具
- 马云收购恒生电子几大关键问题
- ES部分查询方法,elasticsearch查询方法
- 深夜扒一扒Android的发展史
- Python面试简历技能点写法总结
- 【u盘提示:驱动器未格式化】如何解决?
- 好玩的微信互动小游戏有哪些?微信小程序游戏倾情推荐?
- word 多级标题的编辑
热门文章
- rono在oracle的作用_oracle分区表有什么作用
- Android O(SDK 8.0)新特性,刘海屏
- 微信小程序:个人页面/我的页面/资料页面
- 微信支付之 内网穿透
- linux fdisk 挂盘
- P1567_统计天数
- [数学建模] 微分方程--捕鱼业的持续发展
- 提到图像数据脱敏,看这家公司如何理解
- 使用mybatis-plus时mybatis报错There is no getter for property named ‘xxx‘ in ‘class com.xxx.xxx.xxxMybatis
- Win2003合并磁盘分区