admin管理员组文章数量:1580444
一、浏览器内核
五大主流浏览器:IE浏览器、Opera浏览器、Safari浏览器、Firefox浏览器、Chrome浏览器
四大内核:Trident内核(也称IE内核)、Webkit、Chrome、Blink
- IE浏览器内核:Trident内核,俗称IE内核
- Chrome浏览器内核:统称Chromium内核或Chrome内核,以前是Webkit内核,现在是Blink内核
- Firefox浏览器内核:Gecko内核,俗称Firefox内核
- Safari浏览器内核:Webkit内核
- Opera浏览器内核:最开始是自己的Presto内核,后来是Weblit内核,现在是Blink内核
- 360浏览器、猎豹浏览器内核:IE + Chrome双核
- QQ、搜狗、遨游浏览器内核:Trident(兼容模式) + Webkit(高速模式)
- 百度浏览器、世界之窗内核:IE内核
- 2345浏览器内核:以前是IE内核,现在是IE + Chrome双核
二、CSS兼容问题
-
不同浏览器标签默认的内外补丁不同
方法:CSS里{margin:0;padding:0;} -
块属相标签float后,又有横向的margin情况下,IE6中会比设置的大
方法:在float的标签样式中添加display:inline;将其转化为行内属性 -
设置较小高度标签(一般小于10px),在IE6、IE7、遨游中高度超出自己设置高度
方法:给超出高度的标签设置overflow:hidden,或设置行高line-height小于你设置的高度
备注:这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的,这个标签的高度还是会达到默认的行高 -
行内属性标签,设置display:block后采用float布局,又有横行的margin的情况,ie6间距bug(类似第二种)
问题症状:IE6里的间距会超过设置的间距
方法:在display:block;后面加display:inline;display:table; -
图片默认有间距
问题症状:几个img标签放在一起的时候,有些浏览器会有默认的间距
方法:使用float为img布局
备注:因为img标签是行内属性标签,所以只要不超出容器宽度,img标签都会排在一行里,但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道
三、js兼容
- 事件绑定
addEventListener()兼容Fierfox、Chrome、Safari、Opera、IE9+
attachEvent()兼容IE7、8
function click(obj,event){
本文标签: 浏览器
版权声明:本文标题:浏览器兼容 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1727866808a1134532.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论