什么是浏览器兼容？
浏览器兼容性问题又被称为网页兼容性或网站兼容性问题，指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题。在网站的设计和制作中，做好浏览器兼容，才能够让网站在不同的浏览器下都正常显示，给用户更好的体验。
浏览器兼容的重要性。
1）网站做好了浏览器兼容，能够让网站在不同的浏览器下都正常显示
2）浏览器兼容能够抓住更多的网站访客
3）浏览器兼容能够给客户更好的体验
4）兼容工作的重点已经从几年前的样式统一转变为在PC端和移动端对新特性的支持和妥协
浏览器兼容问题及处理方法。

1.不同浏览器的标签默认的样式
简单粗暴法：

* { margin: 0; padding: 0; }

2.ie9 以下浏览器对 html5 新增标签不识别的问题

<script type=”text/javascript” src=”https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js”></script>

3.ie9 以下浏览器不支持 CSS3 Media Query 的问题

<script src=”https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js”></script>

4.解决 IE 9 10 11 等浏览器不支持 <picture> 标签的问题

<script src=”https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js”></script>

5.浏览器 CSS 兼容前缀

-o-transform:rotate(7deg); // Opera

-ms-transform:rotate(7deg); // IE

-moz-transform:rotate(7deg); // Firefox

-webkit-transform:rotate(7deg); // Chrome

transform:rotate(7deg); // 统一标识语句

6.清除浮动 最佳实践
一般常用的方法有三种：

A. 在浮动元素后面添加带有clear属性的空元素
B. 给容器添加属性overflow: hidden或者overflow: auto，在IE6中还需触发haslayout，所以还需添加zoom: 1。
C. 使用:after伪元素（万能清除浮动法）

.clearfix:after { display: block; clear: both; content: “”; visibility: hidden; height: 0; }

7.BFC 解决边距重叠问题

当相邻元素都设置了 margin 边距时，margin 将取最大值，舍弃小值。为了不让边距重叠，可以给子元素加一个父元素，并设置该父元素为 BFC：overflow: hidden;

8.IE6 双倍边距的问题
设置 ie6 中设置浮动，同时又设置 margin，会出现双倍边距的问题

display: inline;

9.解决 IE9 以下浏览器不能使用 opacity

opacity: 0.5;
filter: alpha(opacity = 50);
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

10.IE6不支持min-*
IE6不支持min-height该属性。即使定义了元素高度，如果内容超过元素的高度，IE6在解析时，会自动延长元素的高度。

解决方法：利用IE6不识别!important，给元素设置固定高度，并且设置元素高度自动。
11. td 自动换行的问题
问题：table 宽度固定，td 自动换行
解决：设置 Table 为 table-layout: fixed，td 为 word-wrap: break-word

12.求窗口大小的兼容写法

// 浏览器窗口可视区域大小（不包括工具栏和滚动条等边线）
// 1600 * 525
var client_w = document.documentElement.clientWidth || document.body.clientWidth;
var client_h = document.documentElement.clientHeight || document.body.clientHeight;

// 网页内容实际宽高（包括工具栏和滚动条等边线）
// 1600 * 8
var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth;
var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight;

// 网页内容实际宽高 (不包括工具栏和滚动条等边线）
// 1600 * 8
var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth;
var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight;

// 滚动的高度
var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;

13.图片默认有间距
使用float属性为img布局
14. li之间有间距
解决方法：li 设置vertical-align:middle;

15.滚动事件的兼容

scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

16.事件对象的兼容：

e = evt||window.event

17.阻止冒泡的兼容：

if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}

18.阻止默认行为的兼容:

if(e.preventDefault){
e.preventDefault();
}else{
e. returnValue = false;
}

19.添加事件监听器的兼容

if(target.addEventListener){
target.addEventListener(“click”,fun,false);
}else{
target.attachEvent(“onclick”,fun);
}

20.解除事件监听器的兼容

if(target.removeEventLisener){
target . removeEventListener(“click” , fun , false);
}else{
target . detachEvent(“onclick”, fun);
}

21.ajax创建对象的兼容

var xhr = null；
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(“Microsoft XMLHTTP”);
}

22.关于选取样式的属性的兼容

function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}

————————————————
原文链接：https://blog.csdn.net/weixin_44209472/article/details/88406135