CSS

通用

被点击访问过的超链接样式不在具有hover和active样式
解决方法：
改变CSS属性的排列顺序: L-V-H-A
```
<style type="text/css">
a:link {} 
a:visited {} 
a:hover {} 
a:active {} 
</style>
```

chrome兼容

td设置绝对定位无效
解决方法：
设置td的display:block。

Firefox兼容

FF和IEBOX模型解释不一致导致相差2px
box.style{width:100;border1px;} ie理解为box.width =100 ff理解为box.width =100 + 1*2 = 102 //加上边框2px
解决方法：
```
div{margin:30px!important;margin:28px;}
```

注意：这两个margin的顺序一定不能写反，IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}。重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;

消除ul和ol的缩进
在IE中，设置margin:0px可以去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox中，设置margin:0px仅仅可以去除上下的空白，设置padding:0px后仅仅可以去掉左右缩进，还必须设置list-style:none才能去除列表编号或圆点。
```
list-style:none;margin:0px;padding:0px;
```

LI中内容超过长度后以省略号显示
此方法适用与IE、Opera、safari、chrom浏览器，FF暂不支持。

li{
  width:200px; 
  white-space:nowrap; 
  text-overflow:ellipsis; -o-text-overflow:ellipsis; 
  overflow: hidden;
}

IE兼容

CSS透明

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)
FF：opacity:0.6

元素水平居中问题

FF: margin:0auto;
IE: 父级{ text-align:center; }

margin加倍
设置为float的div在ie下设置的margin会加倍。
解决方案是在这个div里面再加上display:inline;

IE下min-无效

// 设置图片最小尺寸
img{ width: 80px; height: 35px;}
html>body img{ width: auto;height: auto; min-width: 80px; min-height: 35px;}

// 设置页面最小宽度
#container{ min-width: 600px;width:expression(document.body.clientWidth＜ 600? "600px": "auto");}

DIV浮动IE文本产生3象素的bug 左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距。
解决方法：
右边对象设置：margin-right:-3px;

<style>
#box{ float:left; width:800px;}
#left{ float:left; width:50%;}
#right{ width:50%;}
*html #left{ margin-right:-3px;} //这句是关键
</style>
<div id="box">
    <div id="left">＜/div>
    <div id="right">＜/div>
</div>

IE无法设置滚动条颜色
解决办法: 将body换成html

<!DOCTYPE html>
<style type="text/css">
html {
  scrollbar-face-color:#f6f6f6;
  scrollbar-highlight-color:#fff;
  scrollbar-shadow-color:#eeeeee;
  scrollbar-3dlight-color:#eeeeee;
  scrollbar-arrow-color:#000;
  scrollbar-track-color:#fff;
  scrollbar-darkshadow-color:#fff;
}
＜/style>

IE低版本兼容

css中的width和padding
在IE7和FF中width宽度不包括padding，在Ie6中包括padding
IE5和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;} div的宽度会被解释为300px-10px(右填充)-10px(左填充)，最终div的宽度为280px，而在IE6和其他浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时我们可以做如下修改div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
IE6下图片下有空隙
设置img为display:block;
或者设置vertical-align属性为vertical-align:top/bottom/middle/text-bottom
IE6下无法定义1px左右高度的容器
解决方法：
```
overflow:hidden;
zoom:0.08;
line-height:1px
```

JS

IE兼容

事件绑定

IE：dom.attachEvent();  
其他浏览器：dom.addEventListener();

操作tr的html
在ie9以下，不能操作tr的innerHTML
textContent。
解决方法:

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

Firefox兼容

document.form.item('itemName')不能在FF下运行
解决方法：
改用document.formName.elements[“elementName”]
使用 window.event 无法在FF上运行
解决方法：
FF的 event 只能在事件发生的现场使用，此问题暂无法解决。可以把 event 传到函数里变通解决：

onMouseMove = “functionName(event)”
function functionName (e) {
    e = e || window.event;
}

浏览器兼容性问题汇总

CSS

通用

chrome兼容

Firefox兼容

IE兼容

IE低版本兼容

JS

IE兼容

Firefox兼容