直播搭建解决浏览器兼容性问题

[复制链接]
查看: 3029|回复: 0
发表于 2020-4-9 17:08:28 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

直播搭建过程中对于浏览器的兼容性也在考虑的范围之内,在前端开发遇到浏览器兼容性问题,产生这个问题的主要原因是不同浏览器的内核不同,对网页的解析结果会产生差异。想要解决浏览器的兼容性问题,可以从三方面考虑:html,css,js
Html部分
1.调用CDNhtml5shiv,html5shiv.js可以实现让IE低版本浏览器识别并支持html5标签
2.img标签在图片不存在的情况下,各浏览器的解析不一致。在chrome下显示的是一张破损的图片;在fierfox下显示的是alt文字;而在IE浏览器中则显示是破损的图片加文字
3.ul标签内外边距问题。Ul标签在IE中有默认的外边距,但在最新的IE版本以及其他浏览器中有个默认的内边距。解决这一问题的方法:同一设置ul的内外边距为0
Css部分
1.csshack问题。主要针对IE的不同版本
2.IE6双边距问题。IE6在浮动后,有横向的margin,此时,该元素的外边距是其值的2倍,解决方法:display:inline
3.IE6以下的图片下方有空隙,解决方法:给img设置displayblock
4.IE6以下两个float之间会有3pxBug,解决方法:给右边的元素也设置float:left
5.IE6以下没有min-width的概念,其默认的width就是min-width
6.IE6以下使用margin:0auto,无法使元素居中,解决方法:为其父容器设置text-align:center
7.被点击过后的超链接不再具有hoveractive属性,解决方法是按“lvha”的顺序书写css样式
8.在使用绝对定位或者相对定位时,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但父元素默认为0,子高父低,所以不会改变显示顺序
9.IE6以下无法设置1px的行高,原因是由其默认行高引起的,解决方法:为其设置overflow:hidden;或者line-height1px
10.不同浏览器的标签默认的外补丁和内补丁不同,解决方法:css里设置margin0padding0
Js部分
1.标准的事件绑定方法函数为addEventListener,IE以下是attachEvent
2.事件的捕获方式不一致,标准浏览器是由外之内,而IE是由内到外,但是最终的结果是将IE的判断标准设为标准
3.我们常说的事件处理时的event属性,在标准浏览器中其实是传入的,IE以下由window.event获取,并且获取的目标元素方法不同,标准浏览器是event.target,而IE以下则是event.srcElement
4.在低版本的IE重获取日期处理函数的值不是与1900的差值,但是在高版本的IE中和标准浏览器保持了一致,获取的值是与1900的差值,在IE中会获得当前年,但在firefox中则会获得当前年与1900的差值
5.ajax的实现方式不同,也就是对XMLHttpRequest的不同,IE以下是activeXObject
6.IE中不能操作trinnerHtml
7.获得DOM节点的父节点、子节点的方式不同,其他浏览器:parentNodeparentNode.childNodesIEparentElement,parentElenment.children

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

 
 
工作时间:
8:00-18:00
客服热线:
15368564009
客服微信