详解IE6/7浏览器兼容性问题及解决方案-优快云博客

1、IE6/7的setAttribute设置属性的BUG，  属性名和W3C标准不一样，常见的如下

左边为标准游览器的，右边是IE的。
varIEfix = {
 acceptcharset:"acceptCharset",
 accesskey:"accessKey",
 allowtransparency:"allowTransparency",
 bgcolor:"bgColor",
 cellpadding:"cellPadding",
 cellspacing:"cellSpacing",
 "class": "className",
 colspan: "colSpan",
 checked:"defaultChecked",
 selected:"defaultSelected",
 "for": "htmlFor"
, 
 frameborder: "frameBorder",
 hspace: "hSpace",
 longdesc: "longDesc", 
 maxlength: "maxLength",
 marginwidth: "marginWidth", 
 marginheight: "marginHeight",
 noresize: "noResize",
 noshade: "noShade",
 readonly:"readOnly",
 rowspan: "rowSpan",
 tabindex: "tabIndex",
 valign: "vAlign",
 vspace: "vSpace"
}

2、IE6/7动态创建table不显示

下面这种方式可以创建table，并附加到Dom树中，但是在IE中是不显示的：var table = document.createElement("TABLE");
var tr = document.createElement("TR"); 
var td = document.createElement("TD"); 
var text = document.createTextNode("text"); 
td.appendChild(text); 
tr.appendChild(td); 
table.appendChild(tr);
document.body.appendChild(table);
不报错，用Dom查看器也可以看到整个table被完整创建了，并附加到body里面，但就是不显示。这是因为在IE里不允许将tr直接附加到table里，而要先将tr附加到tbody中，然后再将tbody附加到table下。所以正确的应该是：
var table = document.createElement("TABLE");
var tbody = document.createElement("TBODY"); 
var tr = document.createElement("TR"); 
var td = document.createElement("TD"); 
var text = document.createTextNode("text"); 
td.appendChild(text); 
tr.appendChild(td); 
tbody.appendChild(tr) 
table.appendChild(tbody);
document.body.appendChild(table);
FireFox中不存在这个问题。需要注意的是显性的利用HTML构造table时，tbody元素不是必须的，可能IE在解析的时候会自动加入tbody吧，否则就解释不通了？


3、IE6、7不支持border:hidden属性
解决方法用none代替hidden；




4、IE6不支持PNG格式图片背景
解决方法：用无透明度的gif或jpeg代替（牺牲效果），使用IE滤镜加透明效果。


5、IE6默认不缓存背景图片导致闪烁，CSS里每次更改图片的位置时都会重新发起请求，用这个方法告诉IE6缓存背景图片
try {

document.execCommand('BackgroundImageCache', false, true);

} catch(e) {}

6、IE/6/7/8

头部必须加入，否则会有灵异现象产生

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">