前端兼容性问题大全

兼容性问题

---

1、 HTML 对象获取问题

FireFox：document.getElementById(“idName”); ie:document.idname 或者 document.getElementById(“idName”).

解决办法：统一使用 document.getElementById(“idName”);

2、const 问题

Firefox 下,可以使用 const 关键字或 var 关键字来定义常量; IE 下,只能使用 var 关键字来定义常量.

解决方法：统一使用 var 关键字来定义常量.

3、event.x 与 event.y 问题

说明:IE 下,event 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性.

解决方法：使用 mX(mX = event.x ? event.x : event.pageX;)来代替 IE 下的 event.x 或者 Firefox 下的 event.pageX.

4、 window.location.href 问题

说明:IE 或者 Firefox2.0.x 下,可以使用 window.location 或 window.location.href; Firefox1.5.x 下,只能使用 window.location.

解决方法：使用 window.location 来代替 window.location.href.

5、 frame 问题

以下面的 frame 为例：

<frame src="xxx.html" id="frameId" name="frameName" />

(1)访问 frame 对象: IE:使用 window.frameId 或者 window.frameName 来访问这个 frame 对象. frameId 和 frameName 可以同名。 Firefox:只能使用 window.frameName 来访问这个 frame 对象. 另外，在 IE 和 Firefox 中都可以使用 window.document.getElementById(“frameId”)来访问这个 frame 对象. (2)切换 frame 内容: 在 IE 和 Firefox 中都可以使用 window.document.getElementById(“testFrame”).src = "xxx.html"或 window.frameName.location = "xxx.html"来切换 frame 的内容. 如果需要将 frame 中的参数传回父窗口(注意不是 opener,而是 parent frame)，可以在 frame 中使用 parent 来访问父窗口。例如：parent.document.form1.filename.value=“Aqing”;

6、模态和非模态窗口问题

说明:IE 下,可以通过 showModalDialog 和 showModelessDialog 打开模态和非模态窗口;Firefox 下则不能.

解决方法：直接使用 window.open(pageURL,name,parameters)方式打开新窗口。 如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用 window.opener 来访问父窗口. 例如：var parWin = window.opener; parWin.document.getElementById(“Aqing”).value = “Aqing”;

7、firefox 与 IE 的父元素(parentElement)的区别

IE：obj.parentElement firefox：obj.parentNode

解决方法: 因为 firefox 与 IE 都支持 DOM,因此使用 obj.parentNode 是不错选择

8、document.formName.item(“itemName”) 问题

问题说明：IE 下，可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]；Firefox 下，只能使用 document.formName.elements["elementName"]。

解决方法：统一使用 document.formName.elements[“elementName”]。

9、集合类对象问题

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

解决方法：统一使用 [] 获取集合类对象。

10、 自定义属性问题

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

解决方法：统一通过 getAttribute() 获取自定义属性。

11、input.type 属性问题

问题说明：IE 下 input.type 属性为只读；但是 Firefox 下 input.type 属性为读写。

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

12、event.srcElement 问题

问题说明：IE 下，even 对象有 srcElement 属性，但是没有 target 属性；Firefox 下，even 对象有 target 属性，但是没有 srcElement 属性。

解决方法：使用 srcObj = event.srcElement ?event.srcElement : event.target;

13、关于高度问题

问题说明：如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。 如果设定了高度，内容过多时，ie6 下会自动增加高度、其他浏览器会超出边框

解决方法：1.设置 overflow:hidden; 2.高度自增 height:auto!important;height:100px;

14、事件委托方法

问题说明：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 的区别。

15、document.form.item 问题

问题说明： 代码中存在 document.formName.item("itemName") 这样的语句，不能在 FF 下运行

解决方法： 改用 document.formName.elements[“elementName”]

16、cursor:hand VS cursor:pointer

问题说明：firefox 不支持 hand，但 ie 支持 pointer

解决方法: 统一使用 pointer

17、innerText 在 IE 中能正常工作，但在 FireFox 中却不行.

解决方法：在非 IE 浏览器中使用 textContent 代替 innerText

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

18、CSS 透明度的设置

问题说明：

旧的 Opacity 设置

#ceng {
  -khtml-opacity: 0.5;
  -moz-opacity: 0.5;
}

在 Firefox, Safari, Chrome 和 Opera 下的 CSS 透明度

#ceng {
  opacity: 0.7;
}

IE 下的 CSS 透明度

#ceng {
  filter: alpha(opacity=40);
}
#ceng {
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  /* 第一行在IE6, IE7和IE8下有效 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
  /*第二行仅在IE8下有效 */
}

解决方法：

#ceng {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

19、 css 中的 width 和 padding

在 IE7 和 FF 中 width 宽度不包括 padding，在 Ie6 中包括 padding.

20、FF 和 IE BOX 模型解释不一致导致相差 2px

问题说明： box.style{width:100;border 1px;} ie 理解为 box.width = 100 ff 理解为 box.width = 100 + 1*2 = 102 //加上边框 2px

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

21、IE5 和 IE6 的 BOX 解释不一致

问题说明： 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}

22、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 三项才能达到最终效果。

23、元素水平居中问题

FF: margin:0 auto;

IE: 父级{ text-align:center; }

24、变量名与某 HTML 对象 id 相同的问题

问题说明： 在 FF 中，因为对象 id 不作为 HTML 对象的名称，所以可以使用与 HTML 对象 id 相同的变量名，IE 中不能

解决方法： 在声明变量时，一律加上 var ，以避免歧义，这样在 IE 中亦可正常运行 最好不要取与 HTML 对象 id 相同的变量名，以减少错误

25、margin 加倍的问题

问题说明： 设置为 float 的 div 在 ie 下设置的 margin 会加倍。这是一个 ie6 都存在的 bug。

解决方法： 在这个 div 里面加上 display:inline;

例如：

<div id="imfloat">

相应的css为

#imfloat{
   float:left;
   margin:5px;
   display:inline;
}

26、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;
}

27、页面的最小宽度

如上一个问题，IE 不识别 min，要实现最小宽度，可用下面的方法：

#container {
  min-width: 600px;
  width: expression(document.body.clientWidth < 600? "600px": "auto");
}

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

28、DIV 浮动 IE 文本产生 3 象素的 bug

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

#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
html #left{ margin-right:-3px; //这句是关键}

<div id="box">
  <div id="left">
    </div>
    <div id="right"></div></div>
  </div>
</div>

29、 IE 捉迷藏的问题

问题说明：

当 div 应用复杂的时候每个栏中又有一些链接，div 等这个时候容易发生捉迷藏的问题。

有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。

解决办法：对#layout 使用 line-height 属性或者给#layout 使用固定高和宽。页面结构尽量简单。

30、高度不适应

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

例：

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

<div id="box">
  <p>p对象中的内容</p>
</div>

解决办法：在 p 对象上下各加 2 个空的 div 对象 CSS 代码{height:0px;overflow:hidden;}或者为 div 加上 border 属性。

31、IE6 绝对定位的问题

问题说明：

<div style="position:relative;border:1px solid orange;text-align:center;">
  <div style="position:absolute;top:0;left:0;background:#CCC;">
    dovapour
  </div>
  <a href="#" title="vapour的blog">内容</a>
</div>

解决办法： left 的定位错误问题 1、给父层设置 zoom:1 触发 layout。 2、给父层设置宽度 width

bottom 的定位错误问题 1、给父层设置 zoom:1 触发 layout。 2、给父层设置高度 height

32、IE6 下图片下有空隙产生

解决这个 BUG 的技巧有很多,可以是改变 html 的排版,或者设置 img 为 display:block 或者设置 vertical-align 属性为 vertical-align:top/bottom/middle/text-bottom 都可以解决.

33、对齐文本与文本输入框

加上 vertical-align:middle;

<style type="text/css">
input {
    width:200px;
    height:30px;
    border:1px solid red;
    vertical-align:middle;
}
</style>

经验证，在 IE 下任一版本都不适用，而 ff、opera、safari、chrome 均 OK！

34、LI 中内容超过长度后以省略号显示

此技巧适用与 IE、Opera、safari、chrom 浏览器，FF 暂不支持。

<style type="text/css">
li {
    width:200px;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    overflow: hidden;
}
</style>

35、捕获事件

问题说明： FF 没有 setCapture()、releaseCapture()方法

解决方法： IE:

obj.setCapture();
obj.releaseCapture();

FF:

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
if (!window.captureEvents) {
  o.setCapture();
} else {
  window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
if (!window.captureEvents) {
  o.releaseCapture();
} else {
  window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}

36、 IE6 默认的 div 高度

问题说明： ie6 默认 div 高度为一个字体显示的高度，所在 ie6 下 div 的高度大于等于一个字的高度，因此在 ie6 下定义高度为 1px 的容器，显示的是一个字体的高度

解决方法：为这个容器设置下列属性之一 1、设置 overflow:hidden; 2、设置 line-height:1px; 3、设置 zoom:0.08

37、禁止选取网页内容

问题说明： FF 需要用 CSS 禁止，IE 用 JS 禁止

解决方法：

IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;

38. css 滤镜的问题

问题说明： css 滤镜只在 ie 中有效，Firefox, Safari(WebKit), Opera 只能够设置透明，它们不支持滤镜 filter，无法实现图片切换中间变换的效果，只能通过透明度来设置。

解决方法： ff 中设置透明度 -moz-opacity:0.10; opacity:0.6; ie 中只设置 filter:alpha(opacity=50);时，ie6-7 失效，还要设置 1、zoom:1; 2、width:100%;

39. td 高度的问题

问题说明： table 中 td 的宽度都不包含 border 的宽度，但是 oprea 和 ff 中 td 的高度包含了 border 的高度

解决方法： 设置 line-height 和 height 一样。在 ie 中如果 td 中的没有内容，那么 border 将不会显示

40. div 嵌套 p 时，出现空白行

问题说明： div 中显示文本，ff、oprea、Chrome：top 和 bottom 都会出现空白行，但是在 ie 下不会出现空白行。

解决方法： 设置 p 的 margin:0px，再设置 div 的 padding-top 和 padding-bottom

41. IE6-7 图片下面有空隙的问题

问题说明： 块元素中含有图片时，ie6-7 中会出现图片下有空隙

解决方法： 1、在源代码中让<div>和<img>在同一行 2、将图片转换为块级对象 display:block; 3、设置图片的垂直对齐方式 vertical-align:top/middle/bottom 4、改变父对象的属性，如果父对象的宽、高固定，图片大小随父对象而定，那么可以对父元素设置： overflow:hidden; 5、设置图片的浮动属性 float:left;

42. IE6 双倍边距的问题

问题说明： ie6 中设置浮动，同时又设置 margin 时，会出现双倍边距的问题 例

float:left;
width:100px;
margin:0 100px;

解决方法： 设置 display:inline;

43. IE6 width 为奇数，右边多出 1px 的问题

问题说明： 父级元素采用相对定位，且宽度设置为奇数时，子元素采用绝对定位，在 ie6 中会出现右侧多出 1 像素

解决方法： 将宽度的奇数值改成偶数

44. IE6 两个层之间 3px 的问题

问题说明： 左边层采用浮动，右边没有采用浮动，这时在 ie6 中两层之间就会产生 3 像素的间距

解决方法： 1、右边层也采用浮动 float 2、左边层添加属性 margin-right:-3px;

45. IE6 子元素绝对定位的问题

问题说明： 父级元素使用 padding 后，子元素使用绝对定位，不能精确定位

解决方法： 在子元素中设置 left:-20px; top:-1px;

46. 显示手型 cursor:hand

问题说明： ie6/7/8、opera 都支持 但是 safari 、 ff 不支持

解决方法： 写成 cursor:pointer; (所有浏览器都能识别)

47. IE6-7 line-height 失效的问题

问题说明： 在 ie 中 img 与文字放一起时， line-height 不起作用

解决方法： 都设置成 float

48. td 自动换行的问题

问题说明： Table 宽度固定，td 自动换行

解决方法： 设置 Table 的 table-layout:fixed，td 的 word-wrap:break-word

49. 子容器浮动后，父容器扩展问题

问题说明： 子容器都 float 以后，父容器没有设定高度,父容器将不会扩展

解决方法： 只需要添加一个 clear:both 的 div，代码如下：

<div style="border:1px solid#333;width:204px">
    <div style="width:100px;border:1px solid #333; float:left; ">子容器a</div>
    <div style="width:100px;border:1px solid #333; float:left;">子容器b</div>
    <div style="clear:both"></div>
</div>

50. 透明 png 图片会带背景色

问题说明： 子容器都 float 以后，父容器没有设定高度,父容器将不会扩展

解决方法：问题说明： 在 ie6 下透明的 png 图片会带一个背景色

    background-image: url(icon_home.png);
    background-repeat: no-repeat;
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='icon_home.png');
    background-image: none;

51. list-style-position 默认值的问题

问题说明： ie 下 list-style-position 默认为 inside, firefox 默认为 outside

解决方法： css 中指定为 outside 即可解决兼容性问题

52. list-style-image 准确定位的问题

问题说明： li 前设置图片时，图片与其后的文字对齐问题

解决方法： 1、采用背景定位 和 字符缩进的方法

background:url() no-repeat left center;
text-index:16px;

2、采用相对定位方法 li 设置 list-style:url(); li 的子元素 position:relative;top:-5px;

53. ul 标签默认值的问题

问题说明： ul 标签在 ff 中默认是有 padding 值的,而在 ie 中只有 margin 有值

解决方法： 定义 ul{margin:0;padding:0;}就能解决大部分问题

54. IE 中 li 指定高度后，出现排版错误46.js 兼容文件

问题说明： 在 ie 下如果为 li 指定高度可能会出现排版错位

解决方法： 设置 line-height

55.js 兼容文件

使IE5,IE6兼容到IE7模式（推荐）

<!–[if lt IE 7]>

<![endif]–>
使IE5,IE6,IE7兼容到IE8模式

<!–[if lt IE 8]>

<![endif]–>
使IE5,IE6,IE7,IE8兼容到IE9模式

<!–[if lt IE 9]>

<![endif]–>

56. 优先使用最新版本 IE 和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

57.移动端 click 屏幕产生 200-300 ms 的延迟响应

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。

以下是历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放
 (double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是
 字体、图片都很小看不清，此时可以快速 双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，
但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，
如果在t时间区间里用户未进行下一次点击，则 浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器
会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有 多少呢？在IOS safari下，大概为300毫秒。这就是延迟
的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事
件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

· fastclick可以解决在手机上点击事件的300ms延迟

· zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应。

58. 移动端如何清除输入框内阴影

在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：

input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}

59. nodeName 和 tagName 问题

问题说明：
在 FF 中，所有节点均有 nodeName 值，但 textNode 没有 tagName 值，在 IE 中，nodeName 的使用有问题
解决方法：
使用 tagName，但应检测其是否为空

60. 使一个层垂直居中于浏览器中

说明： 使用百分比绝对定位,与外补丁负值的技巧,负值的大小为其自身宽度高度除以二

div { 
    position:absolute;
    top:50%; lef:50%;
    margin:-100px 0 0 -100px;
    width:200px; height:200px;
    border:1px solidred; 
    }