98 lines
2.4 KiB
Markdown
Executable File
98 lines
2.4 KiB
Markdown
Executable File
---
|
||
title: 常见的兼容性问题
|
||
date: 2017-10-22 22:38:44
|
||
tags: [兼容性, 前端]
|
||
categories: 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 库
|
||
|
||
#### |