---
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 问题

```html
<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 中无法使用

解决办法：

```js
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 中内容超过长度以省略号显示

```css
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 库