浏览器兼容性问题和解决方案

- 日理万妓 2021-09-19 21:22 439阅读 0赞

# 简述 #

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。

# 常见的浏览器内核（渲染引擎） #

**四种内核：** Trident、Gecko、Blink、Webkit

<table> 
 <thead> 
  <tr> 
   <th align="left">浏览器</th> 
   <th align="left">内核</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">IE浏览器</td> 
   <td align="left">Trident 内核，也成为 IE 内核</td> 
  </tr> 
  <tr> 
   <td align="left">Chrome浏览器</td> 
   <td align="left">Webkit 内核，现在是 Blink 内核</td> 
  </tr> 
  <tr> 
   <td align="left">Firefox浏览器</td> 
   <td align="left">Gecko 内核，俗称 Firefox 内核</td> 
  </tr> 
  <tr> 
   <td align="left">Safari浏览器</td> 
   <td align="left">Webkit 内核</td> 
  </tr> 
  <tr> 
   <td align="left">Opera浏览器</td> 
   <td align="left">最初是自己的 Presto 内核，后来加入谷歌大军，从Webkit又到了Blink内核</td> 
  </tr> 
  <tr> 
   <td align="left">360浏览器</td> 
   <td align="left">Trident + Blink 双内核</td> 
  </tr> 
  <tr> 
   <td align="left">猎豹浏览器</td> 
   <td align="left">Trident + Blink 双内核</td> 
  </tr> 
  <tr> 
   <td align="left">百度浏览器</td> 
   <td align="left">Trident 内核</td> 
  </tr> 
  <tr> 
   <td align="left">QQ浏览器</td> 
   <td align="left">Trident（兼容模式）+ Webkit（高速模式）</td> 
  </tr> 
 </tbody> 
</table>

# CSS兼容性问题 #

**1. 不同浏览器的标签默认的外边距 ( margin ) 和内边距 ( padding ) 不同**

解决方案一： css 里增加通配符`* { margin: 0; padding: 0; }`

解决方案二： `body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }`

**2. 在 IE6及以下版本中设置了 float，同时又设置 margin，就会出现双边距浮动问题**

问题描述：任何浮动的元素上的外边距加倍

解决方案：在 float 的标签样式控制中加入 `display: inline;` 将其转化为行内属性

**3. IE6下默认有行高**

解决方案：`overflow: hidden;`或 `font-size: 0;` 或 `line-height: xx px;`

**4. 图片默认有间距**

解决方案：使用 float 属性为 img 布局

**5. IE6及以下版本，不支持最小高度 min-height**  
.  
    问题描述：IE6不支持 `min-height` 属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度

解决方案：利用 IE6 不识别 !important，给元素设置固定高度，并且设置元素高度自动。`height: auto !important; height: 300px; min-height: 300px;` IE7 及其其他浏览器都识别 `!important`，虽然定义了 `height: 300px`，但是 !important 的优先级最高。所以内容超过 `300px` 时，还是会自动延长。

**6. IE8及以下版本不支持 opacity**

解决方案：`opacity: 0.5; filter: alpha(opacity = 50); -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity = 80)”;`

**7. IE6以下的 3 像素问题**

问题描述：两个相邻的 div 之间有3个像素的空隙，一个 div 使用了 float，而另一个没有使用产生的。

解决方案一：对另一个 div 也使用 float

解决方案二：给浮动的 div 添加属性 `margin-right: –3px`，但是这样写，在其他浏览器又会不正常，所以我们需要添加 IE6 的 hack，在属性 `margin-right` 前添加下划线 `margin-right: –3px`。（ IE6 以及更低版本的 hack，是在属性前面添加下划线）

**8. 块级元素上下边距合并问题**

问题描述：当上下相邻元素都设置了 `margin` 边距时，`margin` 将取最大值，舍弃小值

解决方案：可以给子元素添加一个父元素，并设置该父元素：`overflow: hidden;`

**9. IE9 以下浏览器不识别 HTML5 新增标签问题**

解决方案：

**10. margin 塌陷问题**

问题描述：如果一个大盒子中包含一个小盒子, 给小盒子设置 `margin-top` 大盒子会一起向下平移

解决方案一：给父盒子加一个边框 `border: 1px solid black;`

解决方案二：给父盒子加 `padding-top: xx px;`

解决方案三：给父盒子设置属性 `overflow: hidden;`

解决方案四：给父盒子设置浮动 `float: left;`

解决方案五：给父盒子设置为行内块 `display: inline-block;`

**11. 清除浮动**

问题描述：浮动元素撑不开父级容器

解决方案一：额外标签法。在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 `clear: both;`

解决方案二：使用 `overflow` 清除浮动。在父元素中添加一个属性 `overflow: hidden;`

解决方案三：使用伪元素清除浮动。

.clearfix::after { 
    	content: "";      /* 伪元素必须给这个content='' */
        display: block;   /* 必须块级才能清除 */
        clear: both;      /* 核心代码 */
        /* 保证伪元素在页面中看不到 */
    	height:0;
        line-height:0;
    	visibility:hidden;
    }
    /* 兼容 IE 67 */
    .clearfix { 
      *zoom: 1;
    }

解决方案四：给父盒子设置高度

# IE属性过滤器（较为常用的hack方法） #

<table> 
 <thead> 
  <tr> 
   <th align="left">字符</th> 
   <th align="left">例子</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">_</td> 
   <td align="left">_height：100px；</td> 
   <td align="left">IE6可以识别</td> 
  </tr> 
  <tr> 
   <td align="left">* 、+ 、!</td> 
   <td align="left">*height：100px；</td> 
   <td align="left">IE6 / IE7可以识别</td> 
  </tr> 
  <tr> 
   <td align="left">\0/</td> 
   <td align="left">height：100px\0/；</td> 
   <td align="left">IE8可以识别</td> 
  </tr> 
  <tr> 
   <td align="left">\9</td> 
   <td align="left">height：100px\9；</td> 
   <td align="left">IE6、7、8、9、10可以识别</td> 
  </tr> 
 </tbody> 
</table>

# 浏览器CSS兼容前缀 #

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

# JS兼容性问写法 #

**1. 获取网页宽和高的兼容性问题**

var winW = document.body.clientWidth || document.documentElement.clientWidth   // 网页可见区域宽
    var winH = document.body.clientHeight || document.documentElement.clientHeight // 网页可见区域宽
    // 以上为不包括边框的宽高，如果是 offsetWidth 或者 offsetHeight 的话包括边框
    
    var winWW = document.body.scrollWidth || document.documentElement.scrollWidth   // 整个网页的宽
    var winHH = document.body.scrollHeight || document.documentElement.scrollHeight // 整个网页的高
    
    var screenH = window.screen.height // 屏幕分辨率的高
    var screenW = window.screen.width  // 屏幕分辨率的宽
    var screenX = window.screenLeft    // 浏览器窗口相对于屏幕的x坐标（除了Firefox）
    var screenXX = window.screenX      // FireFox相对于屏幕的X坐标
    var screenY = window.screenTop     // 浏览器窗口相对于屏幕的y坐标（除了Firefox）
    var screenYY = window.screenY      // FireFox相对于屏幕的y坐标

**2. 获取滚动条距离的兼容性问题**

var scrollTop = document.body.scrollTop || document.documentElement.scrollTop // 网页被卷去的高
    var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft // 网页左卷的距离

**3. 获取行外样式 currentStyle 和 getComputedStyle 的兼容性问题**

function getStyle(el, name){ 
        if(el.currentStyle) { 
            // IE
            return el.currentStyle[name]
        } else { 
            // Chrom, Firefox
    		return getComputedStyle(el, false)[name]
    	}
    }

**4. 用 “索引” 获取字符串每一项的兼容性问题**

var str = 'abcdefg'
    
    alert(str[0])  // 低版本的浏览器IE6, 7不兼容
    	
    alert(str.charAt(0))  // 兼容所有浏览器

**5. 使用 event 对象时的兼容性问题**

document.oncilck = function(ev) { 
        var e = ev || window.event
        alert(e.clientX)
    }

**6. 阻止事件冒泡的兼容性问题**

document.oncilck = function(ev) { 
        var e = ev || window.event
        if (e.stopPropagation) { 
            e.stopPropagation()    // W3C标准
        } else { 
        	e.cancelBubble = true  // IE..
        }
    }

**7. 阻止事件默认行为的兼容性问题**

document.oncilck = function(ev) { 
        var e = ev || window.event
        if (e.preventDefault) { 
            e.preventDefault()      // W3C标准
        } else { 
        	e.returnValue = false   // IE..
        }
    }

**8. 获取事件目标对象的兼容性问题**

document.oncilck = function(ev) { 
        var e = ev || window.event
        var target = e.target || e.srcElement         // 获取 target 的兼容写法，后面的为 IE
        var from = e.relatedTarget || e.formElement   // 鼠标来的地方，同样后面的为 IE...
        var to = e.relatedTarget || e.toElement       // 鼠标去的地方
    }

**9. 获取键盘按键码的兼容性问题**

document.onkeydown = function(ev) { 
    	var e = ev || window.event
    	var code = e.keyCode || e.which || e.charCode
    	console.log(code)
    }

**10. 设置监听事件的兼容性问题**

// 设置监听事件
    function addEvent(el, type, fn) {         // 添加事件监听，三个参数分别为 对象、事件类型、事件处理函数，默认为 false
        if (el.addEventListener) { 
            el.addEventListener(type, fn, false)    // 非IE
        } else { 
            el.attachEvent('on' + type, fn)     // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }
    // 删除事件监听
    function removeEvent(el, type, fn) {   
        if (el.removeEventListener) { 
            el.removeEventListener(type, fn, false)    // 非IE
        } else {  
            el.detachEvent('on' + type, fn)    // IE,这里已经加上on,传参的时候注意不要重复加了
        }
    }

**11. 获取DOM节点的兼容性问题**

// DOM节点相关，主要兼容IE 6 7 8
    
    // 获取下一个兄弟节点
    function nextnode(el) { 
        if (el.nextElementSibling) { 
            return el.nextElementSibling  // 非IE6 7 8 支持
        } else{ 
            return el.nextSibling  // IE6 7 8 支持
        }
    }
    // 获取上一个兄弟节点
    function prenode(el) { 
        if (el.previousElementSibling) { 
            return el.previousElementSibling   // 非IE6 7 8 支持
        } else{ 
            return el.previousSibling     // IE6 7 8 支持
        }
    }
    // 获取第一个子节点
    function firstnode(el) { 
        if (el.firstElementChild) { 
            return el.firstElementChild   // 非IE6 7 8 支持
        } else{ 
            return el.firstChild    // IE6 7 8 支持
        }
    }
    // 获取最后一个子节点
    function lastnode(el) { 
        if (el.lastElementChild) { 
            return el.lastElementChild    // 非IE6 7 8 支持
        } else{ 
            return el.lastChild     // IE6 7 8 支持
        }
    }

**12. 监听鼠标的滑轮滚动事件的兼容性问题**

// 给页面绑定鼠标滑轮滚动事件
    var scrollFunc = function(e) { 
    	var e = e || window.event
        if (e.wheelDelta) {      // 判断浏览器 IE, Chrome滑轮事件
           	// 当滑轮向上滚动时
    	    if (e.wheelDelta > 0) { 
    		    console.log("滑轮向上滚动")
    		    console.log(e.wheelDelta)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.wheelDelta < 0) { 
    	        console.log("滑轮向下滚动")
    	        console.log(e.wheelDelta)
    	    }
        } else if (e.detail) {    // Firefox滑轮事件
        	// 当滑轮向上滚动时
    	    if (e.detail> 0) {   
    		    console.log("滑轮向上滚动")
    		    console.log(e.detail)
    	    }
    	    // 当滑轮向下滚动时
    	    if (e.detail < 0) {  
    			console.log("滑轮向下滚动")
    			console.log(e.detail)
    	    }
        }
    }
    
    // Firefox 使用 DOMMouseScroll 绑定滑轮事件
    if(document.addEventListener) { 
    	document.addEventListener('DOMMouseScroll', scrollFunc, false)
    }
    // W3C标准 IE/Opera/Chrome 
    window.onmousewheel = document.onmousewheel = scrollFunc