nicenote/source/_posts/常见的兼容性问题.md

title	date	tags	categories
常见的兼容性问题	2017-10-22 22:38:44	兼容性 前端	web前端

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 库