浏览器的兼容性

yeooo 发布于2019-08-29 11:25 / 1663人阅读

摘要：浏览器的兼容性兼容有很多新增的标签，在不支持的浏览器中不能正常显示。事件处理中属性，标准浏览器是作为参数带入，而是方式获得。

浏览器的兼容性 html5兼容

html5有很多新增的标签，在不支持html5的浏览器中不能正常显示。
解决方法：
使用html5的静态资源；
加入脚本代码，document.createElement创建新的标签，并display:block;设置为块类型

css兼容

1、png24位的图片在ie6浏览器上出现背景，解决方案是做成png8

2、浏览器默认的margin和padding不同，解决方案是 * {margin:0;padding:0;}

3、IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
    
    浮动ie产生的双倍距离
    #box {
        float:left;
        width:10px;
        margin:0 0 0 10px;
    }
    这种情况下ie会产生20px的距离
    解决方案是在float的标签样式中加入_display:inline;(_这个符号只有ie6会识别)
    
4、IE兼容
    渐进识别的方式
    
    首先，"9"将IE9浏览器从所有情况下分离出来
    接着，"+"将IE8和IE7、IE6分离开来
    .box{
        background-color:#f1ee18;  //所有都可识别
        background-color:#00deff9;   //IE6、7、8
        +background-color:#a200ff;   //IE6、7
        _background-color:#1e0bd1;    //IE6
    }

5、IE条件注释


6、IE6无法定义1px左右高度的容器，是因为默认的行高造成的,解决的方法也有很多,
例如: overflow:hidden zoom:0.08 line-height:1px 

7、使用margin：0 auto；方法使容器居中依然在IE6中行不通，我们要对其父容器使用text-align:center;

8、超链接访问顺序L-V-H-A a:lind,a:visited,a:hover.a:active

9、Chrome中文界面下默认会将小于12px的文本强制按照12px显示
解决方案：-webkit-text-size-adjust:none;

10、在使用绝对定位/相对定位时，设置z-index在ie中可能会失效
是因为其元素依赖于其父元素的z-index，而父元素默认为0，所以子元素z-index高，而父元素低，依然不会改变其显示顺序；

javascript兼容

1、在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent

2、标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。

3、事件处理中event属性，标准浏览器是作为参数带入，而ie是window.event方式获得。

4、获得目标元素ie为e.srcElement 标准浏览器为e.target

5、IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；
Firfox只能使用getAttribute()获取自定义属性；
解决方法：统一使用getAttribute()

6、IE下，event对象有x,y属性，但是没有pageX,pageY属性；
   Firefox，event对象有pageX,pageY属性，但是没有x,y属性。
   解决方法：条件注释

GPU云服务器云服务器兼容java的浏览器浏览器兼容性 webrtc浏览器兼容性 js兼容浏览器兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111633.html

如何机制地回答浏览器兼容性问题

摘要：前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如何才是我们正确回答这个问题的姿势呢。前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如...

leanote 2019-08-22 18:31 评论0 收藏0
如何机制地回答浏览器兼容性问题

摘要：前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如何才是我们正确回答这个问题的姿势呢。前言有过面试经验的同学应该都被问过浏览器兼容性的问题，对于面试官的问题，常常猝不及防，因为通常他们都是这么问的。来谈谈浏览器兼容的问题吧，你对浏览器的兼容性有了解过吗，那么如...

Rindia 2019-08-30 15:54 评论0 收藏0
浏览器兼容性问题

摘要：一兼容性新标签在低于的浏览器中的识别解决以下浏览器对新增标签的不识别，并导致不起作用的问题。目前流行的库有以及，它们都可以修正很多已知的浏览器之间的差异性。问题：经常遇到的浏览器的兼容性的情况、解决方法？思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。一、HTML 兼容性 1.H5新标签在低于IE9的浏览器中的识别 ...

G9YH 2019-08-29 16:35 评论0 收藏0
浏览器兼容性问题

摘要：一兼容性新标签在低于的浏览器中的识别解决以下浏览器对新增标签的不识别，并导致不起作用的问题。目前流行的库有以及，它们都可以修正很多已知的浏览器之间的差异性。问题：经常遇到的浏览器的兼容性的情况、解决方法？思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。一、HTML 兼容性 1.H5新标签在低于IE9的浏览器中的识别 ...

megatron 2019-08-23 11:36 评论0 收藏0
浏览器兼容性问题

摘要：一兼容性新标签在低于的浏览器中的识别解决以下浏览器对新增标签的不识别，并导致不起作用的问题。目前流行的库有以及，它们都可以修正很多已知的浏览器之间的差异性。问题：经常遇到的浏览器的兼容性的情况、解决方法？思路：首先明确项目要兼容哪些浏览器的最低版本，然后考虑到CSS样式和JavaScript在这些浏览器的兼容性。一、HTML 兼容性 1.H5新标签在低于IE9的浏览器中的识别 ...

2501207950 2019-08-02 11:22 评论0 收藏0
前端兼容性探讨

摘要：个人认为兼容性的问题也是对这三个方面进行处理。能力检测需要注意两点先检测达成目的的最常用的特性，可以保证代码最优化，并避免检测多个条件必须测试实际要是用到的特性这些就是小可对兼容性的理解，有不对的希望各位朋友指正探讨，嘻嘻这里和朋友们简单探讨一下个人对于前端兼容性的一些理解：在项目中，前端主要处理html，css,javaScript代码，当然还有可能接触到razor等渲染引擎方面...

MobService 2019-08-01 17:19 评论0 收藏0