浏览器兼容性问题

简述

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

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

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

浏览器内核

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

CSS兼容性问题

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

  • 解决方案一： css 里增加通配符 * { margin: 0; padding: 0; }
  • 解决方案二： body,h1,h2,h3,ul,li,input,div,span,a,form …… { margin: 0; padding: 0; }

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

  • 问题描述：任何浮动的元素上的外边距加倍
  • 解决方案：在 float 的标签样式控制中加入 display: inline; 将其转化为行内属性

• IE6下默认有行高

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

• 图片默认有间距

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

• IE6及以下版本，不支持最小高度 min-height

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

• IE8及以下版本不支持 opacity

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

• IE6以下的 3 像素问题

  • 问题描述：两个相邻的 div 之间有3个像素的空隙，一个 div 使用了 float，而另一个没有使用产生的。
  • 解决方案一：对另一个 div 也使用 float
  • 解决方案二：给浮动的 div 添加属性 margin-right: –3px，但是这样写，在其他浏览器又会不正常，所以我们需要添加 IE6 的 hack，在属性 margin-right 前添加下划线 margin-right: –3px。（ IE6 以及更低版本的 hack，是在属性前面添加下划线）

• 块级元素上下边距合并问题

  • 问题描述：当上下相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值
  • 解决方案：可以给子元素添加一个父元素，并设置该父元素：overflow: hidden;

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

  • 解决方案：

<!--[if lt IE 9]>
 	<script type="text/javascript" src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

• margin 塌陷问题
  • 问题描述：如果一个大盒子中包含一个小盒子, 给小盒子设置 margin-top 大盒子会一起向下平移
  • 解决方案一：给父盒子加一个边框 border: 1px solid black;
  • 解决方案二：给父盒子加 padding-top: xx px;
  • 解决方案三：给父盒子设置属性 overflow: hidden;
  • 解决方案四：给父盒子设置浮动 float: left;
  • 解决方案五：给父盒子设置为行内块 display: inline-block;
• 清除浮动
  • 问题描述：浮动元素撑不开父级容器
  • 解决方案一：额外标签法。在浮动的盒子内部最后，再放一个块级标签，在这个标签内使用 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方法）

字符 例子 说明
_ _height：100px； IE6可以识别

• 、+ 、! *height：100px； IE6 / IE7可以识别
  \0/ height：100px\0/； IE8可以识别
  \9 height：100px\9； IE6、7、8、9、10可以识别
  浏览器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

原文链接：https://blog.csdn.net/fu983531588/article/details/90920462