直播搭建解决浏览器兼容性问题-阿里云开发者社区

开发者社区> 开发与运维> 正文

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

简介:

直播搭建过程中对于浏览器的兼容性也在考虑的范围之内,在前端开发遇到浏览器兼容性问题,产生这个问题的主要原因是不同浏览器的内核不同,对网页的解析结果会产生差异。想要解决浏览器的兼容性问题,可以从三方面考虑:html,css,js。
Html部分
1.调用CDN的html5shiv,html5shiv.js可以实现让IE低版本浏览器识别并支持html5标签
2.img标签在图片不存在的情况下,各浏览器的解析不一致。在chrome下显示的是一张破损的图片;在fierfox下显示的是alt文字;而在IE浏览器中则显示是破损的图片加文字
3.ul标签内外边距问题。Ul标签在IE中有默认的外边距,但在最新的IE版本以及其他浏览器中有个默认的内边距。解决这一问题的方法:同一设置ul的内外边距为0

Css部分
1.css的hack问题。主要针对IE的不同版本
2.IE6双边距问题。IE6在浮动后,有横向的margin,此时,该元素的外边距是其值的2倍,解决方法:display:inline
3.IE6以下的图片下方有空隙,解决方法:给img设置display:block
4.IE6以下两个float之间会有3px的Bug,解决方法:给右边的元素也设置float:left
5.IE6以下没有min-width的概念,其默认的width就是min-width
6.IE6以下使用margin:0auto,无法使元素居中,解决方法:为其父容器设置text-align:center
7.被点击过后的超链接不再具有hover和active属性,解决方法是按“lvha”的顺序书写css样式
8.在使用绝对定位或者相对定位时,IE中设置z-index失效,原因是因为其元素依赖于父元素的z-index,但父元素默认为0,子高父低,所以不会改变显示顺序
9.IE6以下无法设置1px的行高,原因是由其默认行高引起的,解决方法:为其设置overflow:hidden;或者line-height:1px
10.不同浏览器的标签默认的外补丁和内补丁不同,解决方法:css里设置margin:0;padding:0

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中不能操作tr的innerHtml
7.获得DOM节点的父节点、子节点的方式不同,其他浏览器:parentNode、parentNode.childNodes;IE:parentElement,parentElenment.children

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章