Web浏览器兼容模式笔记

常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
IE浏览器 Trident内核，也成为IE内核
Chrome浏览器 Webkit内核，现在是Blink内核
Firefox浏览器 Gecko内核，俗称Firefox内核
Safari浏览器 Webkit内核
Opera浏览器最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器 IE+Chrome双内核
猎豹浏览器 IE+Chrome双内核
百度浏览器 IE内核
QQ浏览器 Trident（兼容模式）+Webkit（高速模式）

1.html5标签的兼容方案:引入：- html5shiv.js;

2.Css3媒体查询兼容方案:引入：- Respond.js;

3.Css3字体单位“rem”兼容方案：rem.js;

4.css样式兼容：
①　问题表现：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
解决方案：CSS里 *{margin:0;padding:0;}

②　块属性标签float后，又有横向的margin情况下，在IE6显示margin比设置的大
问题表现：IE6后面的一块被顶到下一行
解决方案：在float的标签样式控制中加入display:inline;转化为行内属性

③　设置较小高度标签(一般小于10px)，在IE6、IE7，遨游中高度超出设置高度值
问题表现：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度

④　行内属性标签，设置display:block后采用float布局，又有横向的margin情况，IE6间距bug
问题表现：IE6的间距比超过设置的间距
解决方案：在display:block;后面加入display:inline;display:table;

⑤　标签最低高度设置min-height不兼容问题表现：min-height本身就是一个不兼容的css属性，
所以设置min-height时不能兼容所有浏览器解决方案：如果设置一个标签最小高度为200px，需要进行设置 {min-height:200px; height:auto !important;height: 200px; overflow:visible;}备注：b/s系统前端时，当内容小于一个值时，容器的高度保持该值，当内容大于该值时，高度自适应且不出现滚动条。

⑥　光标手形
问题表现：firefox不支持hand，但ie支持pointer
解决方案：统一使用cursor:pointer;

⑦　8. 元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }

⑧　9. Div的垂直居中问题
vertical-align:middle;
将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。

Web浏览器兼容模式笔记相关推荐

360安全浏览器兼容模式怎么设置_测试新手一定要知道：最实用的Web兼容性测试经验都在这...
在日常工作中,我们经常碰到网页不兼容的问题.我们之所以要做兼容性测试,目的在于保证待测试项目在不同的操作系统平台上正常运行. 主要包括待测试项目能在同一操作系统平台的不同版本上正常运行:待测试项目能与 ...
vue检测是不是360浏览器兼容模式_360安全浏览器兼容模式无法访问vue怎么解决？...
360安全浏览器兼容模式无法访问vue怎么解决?下面本篇文章给大家介绍一下vue在IE和360兼容模式下无法显示问题.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 360兼容模式下 ...
解决360浏览器兼容模式的页面显示问题
解决360浏览器兼容模式的页面显示问题参考文章: (1)解决360浏览器兼容模式的页面显示问题 (2)https://www.cnblogs.com/njy888888/p/7827200.html ...
偏偏在面试的时候踏入一个大坑--360浏览器兼容模式
之前从来没使用过360浏览器,也不知道他有兼容模式和极速模式.在线打开之前做过的案例(兼容模式),就完全傻眼了-乱七八糟.很绝望(最气人的是当时竟然没想到换个浏览器试试,哎,第一次面试果然让人记忆深刻 ...
自己碰到的360安全浏览器兼容模式的问题总结
公司之前做的网站项目现在兼容性出了问题,让我负责调试,我就懂一点前端代码,什么的DIV+CSS,hack都不了解,所以上网查了很多资料,也算是小有收获.此贴仅作为个人经验贴,大神还请指点. 遇到的问题 ...
QQ浏览器及360浏览器兼容模式下怎么处理sessionStorage数据
现在很多网站都需要在兼容模式和极速模式下都适应,开发的时候一般都是谷歌浏览器,前端需要存储一些本地信息,一般用的最多的是localStorage跟sessionStorage.极速模式下或者谷歌浏览器 ...
解决echarts在360浏览器兼容模式和ie浏览器不兼容问题
问题一:js 脚本在360浏览器兼容模式会被阻止,需要手动允许程序才能运行. 问题二:js 脚本在ie浏览器会弹出 "echarts lnternet Explo ...
jsp页面360浏览器兼容模式不兼容问题解决方法
众所周知,360浏览器兼容模式是个很蛋疼的模式,让无数开发人员头疼脑热.鄙人也遇到了,为留纪念,特附解决方法如下: 1.在<head>标签前插入 <!DOCTYPE html PUB ...
IE浏览器兼容模式设置
在浏览器的发展历史中,出现过多家厂商争夺市场,导致同时存在两种标准:后W3C出面制定了HTML5,总算结束纷争.而某些网站却仍采用原有标准,为了兼容在IE8 IE9中变出现了兼容浏览模式,英文为Co ...

Web浏览器兼容模式笔记

Web浏览器兼容模式笔记相关推荐

最新文章

热门文章