web前端浏览器兼容问题

深藏阁楼爱情的钟 2022-02-20 10:57 388阅读 0赞

## 浏览器兼容性 ##

> 所谓浏览器的兼容性，就是在不同的浏览器效果对同一段代码有不同的解析；造成对页面显示效果不统一的情况

## 主流浏览器 ##

浏览器内核是可以解析网页语言的代码；也就是渲染引擎；用来渲染显示网页。我已经使用运用我成熟，精湛，精通复制黏贴的技术为大家从百科拿来这段话，不用感谢我。

> 浏览器的内核：浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

<table> 
 <thead> 
  <tr> 
   <th>几大主流浏览器</th> 
   <th>内核</th> 
   <th>特点</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>IE</td> 
   <td>trident</td> 
   <td>是微软在Mosaic代码的基础之上修改而来的，从版本11开始，初步支持WebGL技术。</td> 
  </tr> 
  <tr> 
   <td>Chrome</td> 
   <td>webkit/blink</td> 
   <td>高效稳定、兼容性好、且源码结构清晰、易于维护。</td> 
  </tr> 
  <tr> 
   <td>firefox</td> 
   <td>Gecko</td> 
   <td>代码完全公开；Gecko也是一个跨平台内核</td> 
  </tr> 
  <tr> 
   <td>Opera</td> 
   <td>presto</td> 
   <td>渲染速度的优化达到了极致的动态内核，然而代价是牺牲了网页的兼容性。</td> 
  </tr> 
  <tr> 
   <td>Safari</td> 
   <td>webkit</td> 
   <td>Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是从KDE的KHTML及KJS引擎衍生而来</td> 
  </tr> 
 </tbody> 
</table>

## 解决兼容问题 ##

开始战火点燃，来解决前端开发的一些兼容问题

## JS API ##

#### 获取CSS样式getComputedStyle ####

<div id="box"></div>
    <script> var box = document.getElementById('box'); console.log(window.getComputedStyle(box,null)) </script>

1.  标准浏览器（谷歌，火狐，ie9以上）支持该属性；而ie8以下不支持该属性  
    ![ie8][]
2.  Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中(记得getComputedStyle要挂载到window进行判断，否则ie8以下依旧不支持)

function getStyle(ele,attr) { 
            if(window.getComputedStyle){ 
                return getComputedStyle(ele,null)[attr];
            }else{ 
                return ele.currentStyle[attr];
            }
        }

#### 节点 ####

##### 获取子节点childNodes #####

<div id="box"><p>111111111</p></div>
    ....
    console.log(box.childNodes)

1.  标准浏览器： childNodes 获取到的的内容包括空白节点和元素节点  
    ![结果][20190414103124793.png]
2.  非标准浏览器下： 只包含元素节点  
    ![结果][2019041410321635.png]
3.  使用**children**解决其兼容性（该方法没有兼容性问题）

console.log(box.children[0])

#### 兄弟节点和子节点 ####

1.  通过firstChild和firstElementChild来说明
2.  firstChild在标准会打印文本
3.  firstElementChild在非标准浏览器打印的是undefined，在标准浏览器打印子节点

1.  当然firstChild会在打印文本，我们也可以限制住它，但是个人认为不加也没问题，毕竟先读取firstElementChild，加了更加体现代码的可读性和逻辑性

function getFirstNode(ele) { 
            var node = ele.firstElementChild || ele.firstChild
            if(node && node.nodeType == 1) { 
                return node;
            }else { 
                return null;
            }
        }

### 事件 ###

> 事件对象:当触发事件的时候会产生一个事件对象event，这个事件对象包含与这个事件相关的所有的信息

1.  ie9+和谷歌等标准浏览器，在全局window下面，可以直接打印event相关的信息；但ie6,7,8以上打印**undefined**
2.  做兼容处理

box.onclick = function (e) { 
            e = e || window.event
        }

##### 事件源 #####

事件对象有一个属性叫做事件源；事件源就是对象触发的事件（元素自己）  
在标准浏览器是`target`;但是在ie8以下是`sreElement`

target = e.target || e.srcElement;

##### 事件绑定 #####

1.  w3c认为有事件捕获和事件冒泡，而ie认为没有事件捕获
2.  标准浏览器下支持`EventTarget.addEventListener()`;而ie8以下支持`EventTarget.attachEvent()`会报错`对象不支持“addEventListener”属性或方法`

function on(ele,type,callback) { 
            if(ele.attachEvent){ 
                ele.attachEvent('on'+type,callback)
                console.log(222)
            }else if(ele.addEventListener){ 
                ele.addEventListener(type,callback,false)
            }else{ 
                ele['on'+type] = callback;
            }
        }

##### 事件解绑 #####

1.  标准浏览器： obj.removeEventListenter(事件名,事件函数，false);
2.  ie下：obj.detachEvent(“on”+事件名,事件函数);

function off(ele,type,callback) { 
            if(ele.removeEventListener){ 
                ele.removeEventListener(type,callback,fn)
            }else if(ele.detachEvent){ 
                ele.detachEvent(type,callback)
            }else{ 
                ele['on'+type] = null;
            }
        }

1.  使用方式

function fn(){ 
            console.log('事件绑定与解绑')
        }
        on(box,'click',fn)
        off(box,'click',fn)

### 滚动事件 ###

##### onscroll #####

1.  在标准浏览器(ie+,谷歌，火狐)支持`window.onscroll`或`document.onscroll`，当在ie678认为document没有onscroll事件（使用它既不报错也没有效果）；所以尽量使用`window.onscroll`

window.onscroll = function () { 
        }

##### scrollTop和scrollLeft #####

1.  Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

<div style="height: 10000px;width: 10000px"></div>
    <script>
        window.onscroll = function () { 
            console.log(document.documentElement.scrollTop+'----'+document.body.scrollTop)
        }
    </script>

从这组代码测试可知，标准浏览器和ie6,7,8都支持`document.documentElement`,而`document.body`均打印为0，那么是不是就不用考虑兼容性？

1.  这与声明DTD有关；我们将声明文档类型注释掉(html文档第一个位置);这也是怪异模式

1.  我要成为魔术师了，接下来就是见证奇迹的时刻  
    看下图结果：火狐和谷歌支持的是`document.body`，而ie9以及以下，支持`document.documentElement`;而ie9以上两个都支持  
    ![结果][20190415095251181.png]![ie9][]
2.  兼容封装

function scroll() { 
            if(window.pageYOffset != null){ 
                return { 
                    left: window.pageXOffset,
                    top: window.pageYOffset
                }
            }else if(document.compatMode === 'CSS1Compat'){ 
                // 判断是否是标准模式CSS1Compat，BackCompat是混杂模式
                return  { 
                    left: document.documentElement.scrollLeft,
                    top: document.documentElement.scrollTop
                }
            }else{ 
                return { 
                    left: document.body.scrollLeft,
                    top: document.body.scrollTop
                }
            }
        }

1.  上面那种比较有文化，当然可以简单粗暴封装

function scroll2() { 
            return { 
                top: document.documentElement.top || document.body.top,
                left: document.documentElement.top || document.body.left
            }
        }

### 取消默认行为 ###

1.  标准浏览器支持`e.preventDefault()`;而ie内核支持`window.event.returnValue`
2.  当然如果函数内部不需要执行后续代码或则返回`return false`
3.  兼容封装(`return false`可以注释掉)

### 阻止事件冒泡 ###

function stopBubble(e) {     
        //如果提供了事件对象，则这是一个非IE浏览器 
        if ( e && e.stopPropagation ){   
            //因此它支持W3C的stopPropagation()方法 
            e.stopPropagation();    
        } else {    
            //否则，我们需要使用IE的方式来取消事件冒泡 
            window.event.cancelBubble = true;    
        }   
    }

## CSS兼容问题 ##

### 优雅降级和渐进增强 ###

CSS的三大特性：继承性，优先级，层叠性。而因为具有层叠性，所以做兼容的时候需要警惕CSS3属性的书写顺序.

> 渐进增强:一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后在针对高级浏览器进行效果，交互，追加功能达到更好的效果体验(向上兼容，优先考虑老版本浏览器的可用性)  
> 优雅降级：一开始就构建站点做完整的功能；然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。（向下兼容，优先考虑新版本浏览器的可用性）

#### 解决CSS3兼容问题–加前缀 ####

1.  刚开始，浏览器只支持前缀的CSS3;而不支持正常的CSS3;
2.  现在的浏览器支持前缀的CSS3，也支持没加前缀的CSS3
3.  所以可能以后浏览器渐渐统一，都不会加CSS3的前缀
4.  可以使用优雅降级或则渐进增强来兼容，也表示了我们开发的着重点

.transition {  /*渐进增强写法*/
      -webkit-transition: all .5s;
         -moz-transition: all .5s;
           -o-transition: all .5s;
              transition: all .5s;
    }
    .transition {  /*优雅降级写法*/
              transition: all .5s;
           -o-transition: all .5s;
         -moz-transition: all .5s;
      -webkit-transition: all .5s;
    }

#### CSS Hack的方法 ####

> CSS中的hack就是针对不同的浏览器和版本来写不同的CSS样式,使其能呈现出我们想要的页面效果

兼容性属性设置，注意书写顺序：优先写高等级浏览器支持方式、优先写支持浏览器多的方式（优雅降级）

div{ 
                color: red;/*所有浏览器都支持*/
                color: darkred !important;
                color: black\9;/*所有ie都支持*/
                color: aqua\0;/*IE8+ 有效*/
                *color: fuchsia; /*IE6, IE7 有效*/
                #color: #0ff; /*仅 IE6, IE7 有效*/
                +color: #800; /*仅 IE6, IE7 有效*/
                -color: #008; /*只有 IE6 有效*/
                _color: #080; /*只有 IE6 有效*/
            }

#### Reset ####

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6，p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td
    {  
      margin: 0; 
      padding: 0; 
      border: 0; 
      outline: 0; 
      font-weight: inherit; 
      font-style: inherit; 
      font-size: 100%; 
      font-family: inherit; 
      vertical-align: baseline; 
      } 
      :focus {  
       outline: 0; 
      } 
      body {  
       line-height: 1; 
       color: black; 
       background: white; 
      } 
      ol, ul {  
       list-style: none; 
      } 
      table {  
       border-collapse: separate; 
       border-spacing: 0; 
      } 
      caption, th, td {  
       text-align: left; 
       font-weight: normal; 
      } 
    blockquote:before, blockquote:after, q:before, q:after {  
    
      content: ""; 
    
    } 
    blockquote, q {  
    
      quotes: "" ""; 
    
    }

--------------------

上面是解决的一些方法，没有具体到细节；接下来谈一些属性的兼容性

#### 文字问题 ####

在字体大小相同的情况，谷歌和火狐和ie的行高是不一致的；而且字体大小在不同浏览上也不一致

html{ 
      font-size: 14px;
      line-height: 14px;
    }

谷歌的字体最小只能为12px；如果要支持更小的字体需要使用scale

#box{ 
      font-size: 12px;
      -webkit-transform: scale(0.75);
    }

#### 透明度问题 ####

ie6,7,8不支持`opactiy`该透明度

#box { 	
    				width: 100px;
    				height: 100px;
    				background-color: red;
    				opacity: 0.2;/*标准*/
    				filter:alpha(opacity=20);/*ie中支持*/
    			}

#### 清除浮动 ####

/* 1.标准下：*/
    		.clearfix :: after { 
    			content".";
    			display: block;
    			height: 0;
    			visibility: hidden;
    			clear: both;
    		}
    		/*2.ie6,7,8*/
    		.clearfix { 
    			*zoom: 1;
    		}

#### 文字阴影 ####

ie9以及ie9以下都不支持`text-shadow`,我们需要使用filter做兼容处理

text-shadow: 1px 1px 1px #880000;
    filter: shadow(Color=#880000,Direction=135,Strength=5);

…

## html新标签的兼容性 ##

在ie8以及以下(lte)是不兼容html5新标签，我做了个header容器，界面无法显示  
![结果被注释][20190415174920996.png]

1.  使用document.createElement

var header = document.createElement('header')
        document.body.appendChild(header)

1.  使用第三方文件支持ie7,8(要在head里面引用)

1.  兼容ie6以及以下

##### 待续 #####

先写到这里，后面发现在补充新的…可以加入`749539640`前端交流群交流下；进群即送头衔+狗不理包子一个…有没有觉得很诱惑？

[ie8]: /images/20220220/09e72e858fb14af99948b8e4887d18f8.png
[20190414103124793.png]: /images/20220220/98bf4be7124d4a93baa38bb12a1b406a.png
[2019041410321635.png]: /images/20220220/c20ddf6a4dfb4820a0d3b8066c7499d8.png
[20190415095251181.png]: https://img-blog.csdnimg.cn/20190415095251181.png
[ie9]: /images/20220220/797dd32ee127483dacc8beb92ddd22cf.png
[20190415174920996.png]: /images/20220220/cce0dba8f202495792fb66ddacf0ca44.png