三年前在OSChina写的浏览器兼容,如今我重写了

刚刚入行的时候公司的代码版本管理库使用的是Gitee,因此图方便我的一些分享都是在OSChina社区发布,如今重回掘金希望给一个star Github https://github.com/chaojiaheng

本文章发布至发布于 2018/03/20 19:40 禁止转载 https://my.oschina.net/chaojiaheng/blog/1648063

说浏览器兼容前先讲一下浏览器相关的历史

一、浏览器发展

浏览器作为日常上网和前端程序员的调试工具,它能让你加入全球的网络,通过一个窗口就能够连接世界。当你用浏览器时有没有想过浏览器的发展历史?面对市场上繁多的浏览器你又为什么偏爱你现在用的?

二、五大主流浏览器:

  • 1、chrome:(谷歌)追求简洁、快速、安全,个人认为是最好用、速度最快的浏览器。

  • 2、Internet Explorer 简称IE,微软公司旗下浏览器。

  • 3、firefox浏览器,简称FF浏览器,mozilla公司旗下浏览器,个人认为第二好用浏览器。

  • 4、safari浏览器,苹果公司旗下浏览器,在苹果系统下是很优秀的浏览器,已停止对windows系统的支持。

  • 5、opera浏览器,挪威厂商opera旗下浏览器,该公司还在研发另一款浏览器opera next。

三、五大主流浏览器内核

1、Trident内核:

代表作品是IE,因IE捆绑在Windows中,所以占有极高的份额,又称为IE内核或MSHTML,此内核只能用于Windows平台,且不是开源的。

代表作品还有腾讯、Maxthon(遨游)、360浏览器等。但由于市场份额比较大,曾经出现脱离了W3C标准的时候,同时IE版本比较多,
存在很多的兼容性问题。

2、Gecko内核:

代表作品是Firefox,即火狐浏览器。因火狐是最多的用户,故常被称为firefox内核它是开源的,最大优势是跨平台,在Microsoft Windows、Linux、MacOs X等主

要操作系统中使用。

Mozilla是网景公司在第一次浏览器大战败给微软之后创建的。有兴趣的同学可以了解一下浏览器大战

3、Webkit内核:

代表作品是Safari、曾经的Chrome,是开源的项目。

4、Presto内核:

代表作品是Opera,Presto是由Opera Software开发的浏览器排版引擎,它是世界公认最快的渲染速度的引擎。在13年之后,Opera宣布加入谷歌阵营,弃用了

Presto

5、Blink内核:

由Google和Opera Software开发的浏览器排版引擎,2013年4月发布。现在Chrome内核是Blink。谷歌还开发了自己的JS引擎,V8,使JS运行速度极大地提高了

四、浏览器兼容

1、间隙问题

1.1 div图片间隙

描述:在div中插入图片,div下方将会被图片撑大3px(主要出现在IE6以下版本中)。

hack:(1)

<div style="border:1px dashed red">
<img src = https://user-gold-cdn.xitu.io/2019/12/19/16f1e1de11756491?w=200&h=200&f=jpeg&s=9198>
</div>

将div与img写在一行,如上图所示,img标签下方有3px 的间隙

(2)解决方案:将转化为块状元素,给添加(display:block)声明

<div style="border:1px dashed red"> 
<img src = https://user-gold-cdn.xitu.io/2019/12/19/16f1e1de11756491?w=200&h=200&f=jpeg&s=9198 style="display:block">
</div>

1.2 dt / li 中图片间隙

问题描述:在dt 或 li中添加图片出现图片间隙,主要出现在IE6版本中。

<li style="border:1px dashed red">
<img src = https://user-gold-cdn.xitu.io/2019/12/19/16f1e1de11756491?w=200&h=200&f=jpeg&s=9198 style="display:block">
</li>
<dt style="border:1px dashed red">
<img src = https://user-gold-cdn.xitu.io/2019/12/19/16f1e1de11756491?w=200&h=200&f=jpeg&s=9198 style="display:block">
</dt>

以上两种写法都会出现以下问题:图片上方被撑起


  • hack:解决方案给li添加声明(display:block;overflow:hidden)

    <li style="border:1px dashed red;display:block;overflow:hidden">
    <img src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg" style="display:block">
    </li>
    

    2、默认高度问题

    问题描述:在IE6以下版本中,部分块状元素拥有默认高度(低于18px出现。)当块状元素的height:<18px时,会有一个默认高度18px左右。

    问题如下:

    <div style="height:10px;width:auto;background:red"></div>
    

    dom


    hack:解决方案 => 给元素添加声明:

    font-size:0px;
    overflow:hidden;
    

    3、双倍浮向(双倍边距)

    问题描述:在IE6以下版本中,浏览器解析浮动元素时,会错误的把向边的边界加倍显示。

    hack:给浮动元素添加声明:

    hack:②给元素添加声明:
    

    4、百分比bug

    问题描述:在IE6以下版本中,解析百分比时,会按照四舍五入原则计算导致:50%+50% > 100%

    hack:给右边浮动元素添加声明

    clear:right;
    

    5、鼠标指针bug

    问题描述:

    cursor:hand;的声明只能在IE浏览器中识别。
    cursor:pointer;的声明在IE6以上版本和其他内核浏览器可以识别。
    hack:统一某元素鼠标指针形状为手型(hand),应添加声明
    cursor:pointer
    

    6、表单行高不一致

    问题描述:在IE、火狐、欧朋、Safari、Chrome浏览器中表单的行高对齐方式不一致。

    hack:给表单元素添加

    float:left;
    

    7、透明属性

    IE写法:

    filter:alpha(opacity=value)
    

    兼容其他浏览器:

    opacity:value;
    

    8、属性值后缀

    针对IE8加属性值后缀\o,如:

    height:200px\o;
    

    9、!important优先级声明

    #box{height:60px!important;}
    在IE8以上版本种支持。

    hack:#box{
    height:60px!important;
    height:60px;//优先级声明必须要放到前面,至于为什么会这样先后顺序的写,请参考我写的:优雅降级vs渐进增强
    }
    

    浏览器兼容主要是针对IE浏览器的兼容,目前来说IE浏览器通过几次的改版,以往的问题基本不再存在,市面上也很少有企业去兼容IE6以下的版本(银行、政府、等金融机构可能在在坚守IE6)。

    持续更新ing…(2019.12.19-20:58)

    10、浏览器兼容前缀

    -o-transform:rotate(7deg); // Opera
    -ms-transform:rotate(7deg); // IE
    -moz-transform:rotate(7deg); // Firefox
    -webkit-transform:rotate(7deg); // Chrome
    transform:rotate(7deg); // 统一标识语句
    

    11、a 标签的几种 CSS 状态的顺序

    很多新人在写 a 标签的样式,会疑惑为什么写的样式没有效果,或者点击超链接后,hover、active 样式没有效果,其实只是写的样式被覆盖了。
    正确的a标签顺序应该是:==love hate==
    link:平常的状态
    hover:鼠标放到链接上的时候
    visited:被访问过之后
    active:链接被按下的时候
    

    https://juejin.im/post/5dfb623fe51d45581c1a98e1

    「点点赞赏,手留余香」

      还没有人赞赏,快来当第一个赞赏的人吧!
    0 条回复 A 作者 M 管理员
      所有的伟大,都源于一个勇敢的开始!
    欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论