nicenote/source/_posts/常见的兼容性问题.md
2018-05-26 17:58:20 +08:00

2.4 KiB
Executable File
Raw Blame History

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 的区别

IEobj.parentElement Firefoxobj.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;} IEbox.width = 100 FFbox.width = 100 + 1*2 解决方法:{width: 100px!important; width: 98px;}

margin 加倍的问题

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

页面的最小宽度

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 库