常见的兼容性问题

Author Avatar
Feax 10月 22, 2017
  • 在其它设备中阅读本文章

html 对象获取问题

  • IE: document.idname (老版本)

解决办法:统一用 getElementById()

const 问题

  • IE:只能用 var

解决办法:统一用 var

event.x/y 问题

  • IE:只有 event.x/y 没有pageX/Y

解决办法:mX = event.x/y ? event.x/y : event.pageX/Y

window.location.href 问题

  • IE 和 Firefox1.5 以下:只能用 window.location

解决办法:只用window.location

frame 问题

<frame src="" id="frameId" name="frameName"/>

1、访问对象
IE:可以通过 id 和 name 访问
Firefox:只能通过 name

Firefox 和 IE 的父元素 parentElement 的区别

IE:obj.parentElement
Firefox:obj.parentNode
解决办法:都用obj.parentNode

table 操作问题

  • IE:不允许在 table 和 tr 的 innerHTML 中操作,appendchild 都不行

解决办法:建议用框架,也可以向 js 中添加一个空行

对象宽高赋值问题

  • Firefox 中 obj.style.height = imgObj.height 语句无效

innerText 问题

  • 在 Firefox 中无法使用

解决办法:

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

FF 和 IE 解释相差 2px

box {width:100px; border: 1px;}
IE:box.width = 100
FF:box.width = 100 + 1*2
解决方法:{width: 100px!important; width: 98px;}

margin 加倍的问题

设置为 float 的 div 在 ie 下设置的 margin 会加倍
解决方法:加入 display:inline

页面的最小宽度

IE 不识别 min
解决方法:min-width: 600px; width: expression(document.body.clientWidth < 600px ? ‘600px’ : ‘auto’)

div 浮动 IE 文本产生 3px bug

解决方法:左边浮动,右边margin-right: -3px;

li 中内容超过长度以省略号显示

li {
    width:200px;
    white-spave: nowrap;
    text-overflow: elipsis;
    overflow: hidden;
}

FF 不支持

IE 不能换滚动条颜色

解决方法:将 body 换成 HTML
html {scrollbar-face-color: #fff;….}

如何让层显示在 flash 之上

解决方法:将flash 设置为透明

超链接访问过后 hover 就不显示的问题

解决方法:注意顺序 L-V-H-A

form 标签初始化

在 IE 中会有一点边距
解决方法:ul,form {margin: 0; padding: 0;}

js 强制兼容

可以下载 js 库