前端开发中常见的浏览器兼容性问题及解决方案

Posted 2023-04-05 骆骆爱学习

文章目录

• 前言
• 一、浏览器四大内核
• 二、主流兼容问题
• • （一）浏览器引擎
  • （二）兼容问题的原因
  • （三） 为什么浏览器会存在兼容性问题?
  • （四）处理兼容问题的思路
  • • 1. 要不要做？
    • 2. 做到什么程度？
    • 3. 如何做？
• 三 ，JavaScript兼容问题及解决方案
• 四，CSS兼容问题及其解决方案
• 五，其它CSS兼容问题及其解决方案
• 总结

---

前言

提示：这里主要阐述浏览器兼容性产生的环境：

所谓的浏览器兼容性问题，是指因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况。 为此，解决浏览器兼容，也成为了跨浏览器开发的一个核心问题。
当初微软不加入W3C，使得后者不采用IE的方案，而在IE掉队，Chrome与Firefox崛起后，已经有大量开发者基于IE标准开发了大量的Web产品，让浏览器不得不用兼容模式来解决这一问题。再加上不同浏览器采用的内核不同，由于缺乏统一的开发标准，以及各大浏览器厂商为了凸显产品的特色，更是使得整个浏览器行业出现了百花齐放的状态。

在过去很长的一段时间里，跨浏览器开发、并解决浏览器的兼容问题，成为了前端开发者最为头疼却必须要解决的问题。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。 所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

提示：以下是本篇文章正文内容

一、浏览器四大内核

浏览器	内核
Safari	Webkit
IE	Trident
Firefox	Gecko
Opera	最初是Presto；期间是Webkit；目前Blink
Chrome	以前是：Webkit，目前是Blink
国内浏览器	基本是IE与Chrome双核并存
移动浏览器	基本是Webkit

前端开发人员检查浏览器兼容性的网站 Can I use（https://caniuse.com/）

二、主流兼容问题

（一）浏览器引擎

浏览器引擎主要分为两种

1. 界面渲染引擎
2. js引擎

所以浏览器兼容性问题一般指：css兼容、js兼容

（二）兼容问题的原因

因为不同浏览器对同一段代码有着不同的解析，所造成页面显示效果不统一的情况

（三） 为什么浏览器会存在兼容性问题?

1. 前端技术更迭速度快，同一浏览器，版本越低，对新属性和标签、新特性支持越少。
2. 不同浏览器，由于内核不同，标准不同，实现方 式也有差异，最终呈现出来效果也会有差异。
3. 开发人员水平参差不齐，编码能力有强弱，使得不规范的代码产生不兼容问题。

（四）处理兼容问题的思路

1. 要不要做？

1. 从产品的角度看：产品的受众、受众的浏览器比例、效果优先 还是基本功能优先。
2. 成本的角度：有无必要做这个兼容。

2. 做到什么程度？

1. 让哪些浏览器支持哪些效果

3. 如何做？

1. 根据兼容需求选择技术框架/库(如 jquery 1.x.x )
2. 根据兼容需求选择兼容工具： html5shiv 、 Respond.js 、 CSS Reset 、 normalize.css 、 Modernizr.js 、 postcss
3. 条件注释、 CSS Hack 、 js 能力检测做一些修补。Hack ： CSS 中， Hack 是指一种兼容 CSS 在不同浏览器中正确显示的技巧方法，修补 bug 的方法Filter
   ：表示过滤器的意思，它是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法。本质上讲， Filter 是 hack 方法中的一种。
4. 渐进增强和优雅降级（1）渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。（2）优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context

三 ，javascript兼容问题及解决方案

1.addEventListener 与 attachEvent 区别

attachEvent ——兼容：IE7、IE8；不兼容firefox、chrome、IE9、IE10、IE11、safari、opera。

addEventListener——兼容：firefox、chrome、IE、safari、opera；不兼容IE7、IE8

解决方案：

function addEvent(elm, evType, fn, useCapture) 
  if (elm.addEventListener)  // W3C标准
    elm.addEventListener(evType, fn, useCapture);
    return true;
   else if (elm.attachEvent)  // IE
    var r = elm.attachEvent('on' + evType, fn); // IE5+
    return r;
   else 
    elm['on' + evType] = fn; // DOM事件
  

---

2. document.formName.item("itemName") 的问题

问题说明：

IE下，可以使用

document.formName.item("itemName") 
//或
document.formName.elements ["elementName"]

Firefox 下，只能使用

document.formName.elements["elementName"]

解决方案：

统一使用

document.formName.elements["elementName"]

---

3. 集合类对象问题

问题说明：

IE下，可以使用 () 或 [] 获取集合类对象；
Firefox下，只能使用 [ ] 获取集合类对象。

解决方案：

统一使用 [] 获取集合类对象。

---

4. 自定义属性问题

问题说明：

IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用 getAttribute() 获取自定义属性；
Firefox下，只能使用getAttribute() 获取自定义属性。

解决方案：

统一通过 getAttribute() 获取自定义属性。

---

5. eval(“idName”) 的问题

问题说明：

IE下，可以使用 eval(“idName”) 或 getElementById(“idName”) 来取得 id 为 idName的HTML对象；
Firefox下，只能使用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

解决方案：

统一用 getElementById(“idName”) 来取得 id 为 idName 的HTML对象。

---

6. 变量名与某HTML对象ID相同的问题

问题说明：

IE下，HTML对象的ID可以作为 document 的下属对象变量名直接使用，Firefox下则不能；
Firefox下，可以使用与HTML对象ID相同的变量名，IE下则不能。

解决方案：

使用 document.getElementById(“idName”)
代替 document.idName。
最好不要取HTML对象ID相同的变量名，以减少错误；在声明变量时，一律加上 var 关键字，以避免歧义。

---

7. const 问题

问题说明：

Firefox下，可以使用 const 关键字或 var 关键字来定义常量；IE下，只能使用 var 关键字来定义常量。

解决方案：

统一使用 var 关键字来定义常量。

---

8. input.type属性问题

问题说明：

IE下 input.type 属性为只读；但是Firefox下 input.type 属性为读写。

解决方案：

不修改 input.type 属性。如果必须要修改，可以先隐藏原来的 input，然后在同样的位置再插入一个新的 input 元素。

---

9. window.event 问题

问题说明：

window.event 只能在IE下运行，而不能在Firefox下运行，这是因为Firefox的 event 只能在事件发生的现场使用。

解决方案：

在事件发生的函数上加上 event 参数，在函数体内(假设形参为 evt )
使用var myEvent = evt?evt:(window.event? window.event:null)

代码示例：

<input type="button" onclick="doSomething(event)"/>
<script language="javascript"> 
  function doSomething(evt) 
		var myEvent = evt ? evt :(window.event ? window.event : null);
		…
	
</script>

---

10. event.x 与 event.y 问题

问题说明：

IE下，event 对象有 x、y 属性，但是没有 pageX、pageY属性；
Firefox下，event对象有pageX、pageY属性，但是没有 x、y属性。

解决方案：

var myX = event.x ? event.x : event.pageX; var myY = event.y ? event.y:event.pageY;

如果考虑第8条问题，就改用 myEvent 代替 event 即可。

---

11. event.srcElement 问题

问题说明：

IE下，event 对象有 srcElement 属性，但是没有 target 属性；
Firefox下，event 对象有target 属性，但是没有 srcElement 属性。

解决方案：

使用 srcObj = event.srcElement ? event.srcElement : event.target;

如果考虑第8条问题，就改用 myEvent 代替 event 即可。

---

12. window.location.href 问题

问题说明：

IE或者Firefox2.0.x下，可以使用 window.location 或
window.location.href；
Firefox1.5.x下，只能使用 window.location。

解决方案：

使用 window.location 来代替 window.location.href 。当然也可以考虑使用
location.replace()方法。

---

13. 模态和非模态窗口问题

问题说明：

IE下，可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口；
Firefox下则不能。

解决方案：

直接使用 window.open(pageURL,name,parameters)
方式打开新窗口。如果需要将子窗口中的参数传递回父窗口，可以在子窗口中使用 window.opener 来访问父窗口。
如果需要父窗口控制子窗口的话，使用 var subWindow =
window.open(pageURL,name,parameters); 来获得新开的窗口对象。

---

14. frame 和 iframe 问题

以下面的 frame为例：

(1)访问 frame 对象IE：使用 window.frameId 或者 window.frameName 来访问这个 frame 对象；
Firefox：使用 window.frameName 来访问这个 frame 对象；

解决方案：

统一使用 window.document.getElementById(“frameId”) 来访问这个 frame 对象；
(2)切换 frame 内容在IE和Firefox中都可以使用
window.document.getElementById(“frameId”).src = “webjx.com.html” 或window.frameName.location = “webjx.com.html” 来切换 frame 的内容；如果需要将 frame 中的参数传回父窗口，可以在 frame 中使用 parent 关键字来访问父窗口。

---

15. 事件委托方法

问题说明：

IE下，使用 document.body.onload = inject; ， 其中 function inject() 在这之前已被实现；
在Firefox下，使用 document.body.onload = inject();

解决方案：

统一使用 document.body.οnlοad=new Function(“inject()”); 或者document.body.onload = function() [注意] Function 和 function 的区别

---

16. 用 setAttribute 设置事件

var obj = document.getElementById("objId");
obj.setAttribute("onclick", "funcitonname()");

FireFox 支持，IE不支持。

解决方案：

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数；

如下：

var obj = document.getElementById("objId");
obj.onclic k= function() fucntionname(); ;

这种方法所有浏览器都支持

---

17. 访问的父元素的区别

问题说明：

在IE下，使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点；
在FireFox下，使用obj.parentNode 访问 obj 的父结点。

解决方案：

因为FireFox与IE都支持DOM，因此统一使用 obj.parentNode 来访问 obj 的父结点。

---

18. innerText 的问题.

问题说明：

innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行。

解决方案：

在非IE浏览器中使用 textContent 代替 innerText。

if (navigator.appName.indexOf("Explorer") > -1) 
  document.getElementById("element").innerText = "my text";
 else 
  document.getElementById("element").textContent = "my text";

[注] innerHTML 同时被IE、FireFox等浏览器支持，其他的，如 outerHTML 等只被IE支持，最好不用。

---

19. Table 操作问题

问题说明：

IE、FireFox以及其它浏览器对于 table 标签的操作都各不相同，
在IE中不允许对 table 和 tr 的innerHTML 赋值，使用js 增加一个 tr 时，使用 appendChild 方法也不管用。

解决方案：

document.appendChild 在往表里插入行时FireFox支持，IE不支持解决方案：把行插入到 tbody中，不要直接插入到表解决方法：

// 向table追加一个空行：
var row = otable.insertRow(-1);
var cell = document.createElement("td"); 
cell.innerHTML = "";
cell.className = "XXXX"; 
row.appendChild(cell);

[注] 建议使用JS框架集来操作 table，如JQuery。

---

20. 对象宽高赋值问题

问题说明：

FireFox中类似 obj.style.height = imgObj.height 的语句无效。

解决方案：

统一使用obj.style.height = imgObj.height + “px”;

---

21. setAttribute(“style”, “color: red;”)

FireFox支持(除了IE，现在所有浏览器都支持)，IE不支持

IE解决方案：

不用 setAttribute(“style”, “color : red;”)而用 object.style.cssText = “color: red;”(这写法也有例外)最好的办法是上面种方法都用上，万无一失

---

22. 类名设置 setAttribute(“class”, “styleClass”)

FireFox支持，IE不支持(指定属性名为 class，IE不会设置元素的 class 属性，相反只使用 setAttribute时IE自动识 classname 属性)

解决方案：

setAttribute(“class”, “styleClass”)setAttribute(“className”,
“styleClass”)或者直接 object.className= “styleClass”;IE和FF都支持object.className。

---

23. 建立单选钮

// 其他浏览器
var rdo = document.createElement("input");
rdo.setAttribute("type", "radio"); 
rdo.setAttribute("name", "radiobtn"); 
rdo.setAttribute("value", "checked");

// IE
var rdo = document.createElement("<input name="radiobtn" type="radio" value="checked" />");

解决方案：

这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有 IF-ELSE了万幸的是，IE可以识别出 document 的 uniqueID 属性，别的浏览器都不可以识别出这一属性。问题解决。

---

四，CSS兼容问题及其解决方案

1. CSS Hack

使用 hacker 可以把浏览器分为3类：

(1). IE6；
(2). IE7和遨游；
(3). 其他（IE8 Chrome ff Safari opera等）

详细分类及解决方案

（1）IE6认识的 hacker 是 下划线 _ 和星号 *
（2）IE7和遨游认识的 hacker 是 星号 * 如：
height:300px;*height:200px;_height:100px;
（3）IE6浏览器在读到 height:300px的时候会认为高时 300px 继续往下读，他也认识 *heihgt ， 所以当IE6读到 *height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是 200px 。 继续往下读，IE6还认识 _height ,所以他又会覆盖掉 200px
高的设置，把高度设置为 100px 。
（4）IE7和遨游也是一样的从高度 300px 的设置往下读。当它们读到 *height:200px 的时候就停下了，因为它们不认识 _height 。 所以它们会把高度解析为 200px ，剩下的浏览器只认识第一个 height:300px ; 所以他们会把高度解析为 300px 。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。

---

2. CSS 样式兼容不同浏览器问题

所有浏览器通用： height: 100px;
IE6 专用： _height: 100px; 或者 *height: 100px;
IE7 专用： *+height: 100px;
IE7、FF 共用： height: 100px !important;

以下两种方法几乎能解决现今所有兼容：

（1） !important 随着IE7对 !important 的支持, !important 方法现在只针对IE6的兼容(注意写法，记得该声明位置需要提前)

.box 
  width: 100px !important; /* IE7+FF */
  width: 80px; /* IE6 */

(2)IE6/IE77对FireFox <from 针对FireFox ie6 ie7的css样式>*+html 与 *html 是IE特有的标签，FireFox 暂不支持。而 *+html 又为 IE7特有标签。

.box  width: 120px;  /* FireFox */
*html .box  width: 80px; /* ie6 fixed */
*+html .box  width: 60px; /* ie7 fixed, 注意顺序 */

---

3. 万能 float 闭合(非常重要) 可以用这个解决多个 div 对齐时的间距不对

将以下代码加入 Global CSS 中，给需要闭合的 div 加上 class=“clearfix” 即可，屡试不爽。

代码：

<style>
/* Clear Fix */
.clearfix:after 
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;

.clearfix 
    display: inline-block;

/* Hide from IE Mac \\*/
.clearfix 
    display:block;

/* End hide from IE Mac */
/* end of clearfix */
</style>

---

4. 其他兼容技巧

Firefox下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会(可用 !important 解决)

居中问题：

垂直居中将 line-height 设置为当前 div 相同的高度, 再通过 vetical-align: middle ( 注意内容不要换行） 水平居中： margin: 0 auto; (当然不是万能)

若需给 a 标签内内容加上 样式，需要设置 display: block; (常见于导航标签) Firefox 和 IE 对 BOX理解的差异导致相差 2px 的还有设为 float 的 div 在 ie下 margin 加倍等问题 ul 标签在 FF 下面默认有 list-style 和 padding 最好事先声明，以避免不必要的麻烦(常见于导航标签和内容列表) 作为外部 wrapper 的 div 不要定死高度，最好还加上 overflow: hidden 以达到高度自适应

---

5. 兼容代码：兼容最推荐的模式。

/* FF */
.submitbutton 
    float: left;
    width: 40px;
    height: 57px;
    margin-top: 24px;
    margin-right: 12px;

/* IE6 */
*html .submitbutton 
    margin-top: 21px;

/* IE7 */
*+html .submitbutton 
    margin-top: 21px;

---

6. 兼容 CSS 方法

兼容页面的方法是：

每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。

---

五，其它CSS兼容问题及其解决方案

1. 不同浏览器的标签默认margin 和 padding 不同

问题说明：

随便写几个标签，不加样式控制的情况下，各自的 margin 和 padding 差异较大。解决方案： CSS: *margin: 0;padding:0;

---

2. 块属性标签 float 后，又有横行的 margin 情况下，在IE6显示 margin 比设置的大

问题说明：

常见症状是IE6中后面的一块被顶到下一行（ float 布局最常见的浏览器兼容问题）

解决方案：

在 float 的标签样式控制中加入 display:inline; 将其转化为行内属性备注：我们最常用的就是 div+CSS 布局了，而
div就是一个典型的块属性标签，横向布局的时候我们通常都是用 div float 实现的，横向的间距设置如果用 margin
实现，这就是一个必然会碰到的兼容性问题。

---

3. 较小高度标签（一般小于 10px ）问题

问题说明：

IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度解决方案：给超出高度的标签设置 overflow:hidden; 或者设置行高 line-height 小于你设置的高度。

备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

---

4. 行内属性标签，设置 display:block 后采用 float 布局，又有横行的 margin 的情况，IE6间距 bug

问题说明：

IE6里的间距比超过设置的间距

解决方案：

在 display:block; 后面加入 display:inline;display:table;备注：行内属性标签，为了设置宽高，我们需要设置 display:block; (除了 input 标签比较特殊)。在用 float 布局并有横向的 margin 后，在IE6下，他就具有了块属性 float 后的横向 margin 的 bug 。不过因为它本身就是行内属性标签，所以我们再加上 display:inline 的话，它的高宽就不可设了。这时候我们还需要在 display:inline 后面加入 display:talbe 。

---

5. 图片默认有间距

问题说明：

几个 img 标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。

解决方案：

使用 float 属性为 img 布局备注：因为 img 标签是行内属性标签，所以只要不超出容器宽度， img标签都会排在一行里，但是部分浏览器的 img 标签之间会有个间距。去掉这个间距使用 float 是正道。

---

6. 标签最低高度设置 min-height 不兼容

问题说明：

因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容解决方案：如果我们要设置一个标签的最小高度 200px ，需要进行的设置为：

 
  min-height: 200px; 
  height: auto !important; 
  height: 200px; 
  overflow:visible;
 

备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如 300px ）时。容器的高度为 300px ；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。

---

7. CSS 布局中的居中问题

问题说明：

首先在父级元素定义 text-align: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法：在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;

---

8. IE浮动产生的双倍距离

#box  
  float: left; 
  width: 100px; 
  margin: 0 0 0 100px; // 这种情况之下IE会产生200px的距离
  display: inline; // 使浮动忽略

这里细说一下 block， inline 两个元素Block元素的特点是：总是在新行上开始，高度、宽度、行高、边距都可以控制(块元素)Inline 元素的特点是：和其他元素在同一行上，不可控制(内嵌元素)

#box  
  display: block; // 可以为内嵌元素模拟为块元素 
  display: inline; // 实现同一行排列的的效果 
  diplay: table;

---

9. IE与宽度和高度的问题

IE不认得 min- 这个定义，但实际上它把正常的 width 和 height 当作有 min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用 min-width 和 min-height 的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个宽度是比较重 要的。

解决方案：

要解决这个问题，可以这样：

#box  
  width: 80px; 
  height: 35px;

html>body #box 
  width: auto; 
  height: auto; 
  min-width: 80px; 
  min-height: 35px;

---

10. 页面的最小宽度

min-width 是个非常方便的 CSS 命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

放到 标签下，然后为 div 指定一个类，然后 CSS 这样设计：

#containe r
    min-width: 600px;
    width: e-xpression(document.body.clientWidth < 600? "600px": "auto");

第一个 min-width 是正常的；但第2行的 width 使用了 JavaScript ，这只有IE才认得，这也会让你的 HTML文档不太正规。它实际上通过 JavaScript 的判断来实现最小宽度。

---

11. 清除浮动

.box 
  display: table;
  // 将对象作为块元素级的表格显示

// 或者
.box 
  clear: both;

或者加入 :after （伪对象）,设置在对象后发生的内容，通常和 content 配合使用，IE不支持此伪对象，非IE浏览器支持，所以并不影响到IE/WIN浏览器。

#box:after 
  content: “.”;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;

---

12. DIV 浮动IE文本产生 3px 的 bug

左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有 3px 的间距。

#box 
  float: left;
  width: 800px;

#left 
  float: left;
  width: 50%;

#right 
  width: 50%;

*html #left 
  margin-right: -3px; // 这句是关键

---

13. IE捉迷藏的问题

当 div 应用复杂的时候每个栏中又有一些链接， div等这个时候容易发生捉迷藏的问题。有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。解决方案：对 #layout 使用 line-height 属性或者给 #layout 使用固定高和宽。页面结构尽量简单。

---

14. 高度不适应

高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用 margin 或 padding 时。

例：

<div id=”box”>
	<p>p对象中的内容</p>
</div>
复制代码
CSS ：
#box 
  background-color: #eee; 

#box p 
  margin-top: 20px;
  margin-bottom: 20px; 
  text-align: center; 

解决方案：

在 p 对象上下各加 2 个空的 div 对象 CSS 代码： .1 height: 0px; overflow: hidden; 或者为 DIV 加上 border 属性。

---

15. cursor 属性问题

cursor: hand; VS cursor: pointer; 问题说明：FireFox不支持 hand，但IE支持 pointer

解决方法：

统一使用 pointer。

---

16. 对盒模型的解析不一致

对 border 的解析不一致，如：box.style width: 100px; border: 1px; ；IE理解为 box.width = 100px;；Firefox 理解为 box.width = 100 + 1*2 = 102px; // 加上边框2px

解决方案：

div margin: 30px !important; margin: 28px; 注意这两个 margin 的顺序一定不能写反， IE不能识别 !important 这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div maring: 30px; margin: 28px; 重复定义的话按照最后一个来执行，所以不可以只写 margin: XXpx !important;

IE5 和 IE6 的盒模型解释不一致。IE5下 div width: 300px; margin: 0 10px 0 10px; 其中 div 的宽度会被解释为 300px-10px(右填充)-10px(左填充)，最终 div 的宽度为 280px ，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px 来计算的。

解决方案：

做如下修改 div width: 300px !important; width /**/: 340px; margin: 0 10px 0 10px; 17、ul 和 ol 列表缩进问题消除 ul、ol 等列表的缩进时，样式应写成：list-style: none; margin: 0px; padding: 0px; 经验证，在IE中，设置 margin: 0px; 可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置 padding 对样式没有影响；在 Firefox 中，设置 margin: 0px; 仅仅可以去除上下的空白，设置 padding: 0px; 后仅仅可以去掉左右缩进，还必须设置 list- style: none; 才能去除列表编号或圆点。也就是说，在IE中仅仅设置 margin: 0px; 即可达到最终效果，而在Firefox中必须同时设置margin: 0px;、 padding: 0px; 以及 list-style: none; 三项才能达到最终效果。

---

17. 为什么无法定义 1px 左右高度的容器

IE6下这个问题是因为默认的行高造成的；解决的技巧也有很多：例如：overflow: hidden; zoom: 0.08 line-height: 1px;

---

18. 链接(a标签)的边框与背景

a 链接加边框和背景色，需设置 display: block; 同时设置 float: left; 保证不换行。 参照 menubar,给 a 和 menubar 设置高度是为了避免底边显示错位，若不设 height, 可以在 menubar 中插入一个空格。19、超链接访问过后 hover 样式就不出现的问题问题说明：被点击访问过的超链接样式不在具有 hover 和 active了解决技巧是改变CSS属性的排列顺序: L-V-H-A ；

<style type="text/css"> <!-- a:link  a:visited  a:hover  a:active  --> </style>

---

总结

提示：这里对文章进行总结：

其实这是因为导致浏览器兼容性问题的历史包袱，现在已经不存在了。微软的IE11以及Edge已经彻底“寿终正寝”了，同时Mozilla的Firefox市场份额已不到4%，Opera浏览器更是放弃了自己的Presto内核、改用Webkit内核，并且Webkit内核也基本上已经一统整个市场了。至于说，谷歌与Opera合力研发的Blink内核，则是Webkit内核的硬分叉产物，两者拥有同一个源流。

换句话来说就是，当初浏览器兼容性问题的出现，是因为浏览器厂商太多、浏览器内核太多，各家的标准让开发者无所适从。但现在随着微软Edge加入谷歌的Chromium生态、Firefox式微，以及苹果Safari圈地自萌，开放的生态让Chromium的标准成为了全球开发者都在遵循的行业标准。

简单来说，就是Chromium生态在事实上已经垄断了浏览器市场，只需要4家厂商就可以制定浏览器的事实标准了。

文中如有不足或错误虚心请教指正

文章内容参考及转发由以下网址

1. 掘金-去追光
2. 三易在线

WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。
在学习浏览器兼容性之前，我想把前端开发人员划分为两类：

第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px的，他们很容易就会发现设计图的不足，并且在很少的情况下会碰到浏览器的兼容性问题，而这些问题往往都是浏览器的bug，并且他们制作的页面后期易维护，代码重用问题少，可以说是比较牢固放心的代码。

第二类是基本按照设计图来开发的前端开发人员，很多细枝末节差距很大，不如间距，行高，图片位置等等经常会差几px。某种效果的实现也是反复调试得到，具体为什么出现这种效果还模模糊糊，整体布局十分脆弱。稍有改动就乱七八糟。代码为什么这么写还不知所以然。这类开发人员往往经常为兼容性问题所困。修改好了这个浏览器又乱了另一个浏览器。改来改去也毫无头绪。其实他们碰到的兼容性问题大部分不应该归咎于浏览器，而是他们的技术本身了。

这篇文章主要针对的是第一类，严谨型的开发人员，因此这里主要从浏览器解析差异的角度来分析兼容性问题
浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
    问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。
    碰到频率:100%
    解决方案：css里    *{margin:0;padding:0;}
    备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的css文件开头都会用通配符*来设置各个标签的内外补丁是0。
浏览器兼容问题二：块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大
    问题症状:常见症状是ie6中后面的一块被顶到下一行
    碰到频率：90%（稍微复杂点的页面都会碰到，float布局最常见的浏览器兼容问题）
    解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
    备注：我们最常用的就是div+css布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。
浏览器兼容问题三：设置较小高度标签（一般小于10px），在ie6，ie7，遨游中高度超出自己设置高度
    问题症状：ie6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
    碰到频率：60%
    解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
    备注：这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是ie8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。
浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug（类似第二种）
    问题症状：ie6里的间距比超过设置的间距
    碰到几率：20%
    解决方案：在display:block;后面加入display:inline;display:table;
    备注：行内属性标签，为了设置宽高，我们需要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在ie6下，他就具有了块属性float后的横向margin的bug。不过因为它本身就是行内属性标签，所以我们再加上display:inline的话，它的高宽就不可设了。这时候我们还需要在display:inline后面加入display:talbe。
浏览器兼容问题五：图片默认有间距
    问题症状：几个img标签放在一起的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起作用。
    碰到几率：20%
    解决方案：使用float属性为img布局
    备注：因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。
浏览器兼容问题六：标签最低高度设置min-height不兼容
    问题症状：因为min-height本身就是一个不兼容的css属性，所以设置min-height时不能很好的被各个浏览器兼容
    碰到几率：5%
    解决方案：如果我们要设置一个标签的最小高度200px，需要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
    备注：在B/S系统前端开时，有很多情况下我们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候我们就会面临这个兼容性问题。
浏览器兼容问题七：透明度的兼容css设置
方法是：每写一小段代码（布局中的一行或者一块）我们都要在不同的浏览器中看是否兼容，当然熟练到一定的程度就没这么麻烦了。建议经常会碰到兼容性问题的新手使用。很多兼容性问题都是因为浏览器对标签的默认属性解析不同造成的，只要我们稍加设置都能轻松地解决这些兼容问题。如果我们熟悉标签的默认属性的话，就能很好的理解为什么会出现兼容问题以及怎么去解决这些兼容问题。
/* css hack*/
我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码ie不兼容，然后用hack来解决。不过hacker还是非常好用的。
使用hacker 我可以吧浏览器分为3类：ie6 ；ie7和遨游；其他（ie8 chrome ff safari opera等）
ie6认识的hacker 是下划线_ 和星号 *
ie7 遨游认识的hacker是星号 * （包括上面问题6中的 !important也算是hack的一种。不过实用性较小。）
比如这样一个css设置 height:300px;*height:200px;_height:100px;
ie6浏览器在读到 height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当ie6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，ie6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；
ie7和遨游也是一样的从高度300px的设置往下读。当它们读到*height200px的时候就停下了，因为它们不认识_height。所以它们会把高度解析为200px；
剩下的浏览器只认识第一个height:300px;所以他们会把高度解析为300px。
因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。
最后说一下，严谨型的开发人员会有一套合适自己的RESET.CSS。结合自己的经验尽量规避容易出现不兼容的问题。以减少hack的使用，尽量符合W3C的标准。