IE兼容的工作笔记

最近做开发一个医院的项目，医院系统电脑老旧，需要兼容到ie6,做前端开发始终还是没有能够逃脱IE的魔掌。
祷告：珍爱生命，远离IE
笔记分享分为两个部分：JS，CSS

JS

1.ie7及以下indexOf，location.origin，getElementsByClassName等js api 都不支持
2.ie7及以下event.preventDefault，event.stopPropagation分别改用
window.event.returnValue = false; window.event.cancelBubble = true;
3.ie获取target的兼容性写法

var event = e || window.event; var target = event.target || event.srcElement;

4.ie7及以下获取一个元素的offsetTop,相对的父元素有区别，正常获取的offsetTop值是相对直属父节点的offsetTop值，需要计算父节点的offsetTop加上自己的offsetTop才是相对滚动容器节点正确的偏移值
5.ie8及以下image没有原始图片尺寸naturalWidth和naturalHeight,通过

var testImage = document.getElementById('test-image');
var naturalWidth = testImage.naturalWidth;
var naturalHeight = testImage.naturalHeight;
if (ieVersion <=8) {
    var img = new Image();
    img.src = bigImage.src;
    naturalWidth = img.width;
    naturalHeight = img.height;
}

6.ie8及以下剪贴板

var target = document.getElementById(id);
if (document.createRange) {
    var range = document.createRange();
    range.selectNode(target);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    document.execCommand('copy');
    window.getSelection().removeAllRanges();
} else {
    // ie8以下的剪贴板
    window.clipboardData.setData('Text', target.innerText);
}

CSS

ie9及以下没有默认提示的样式placeholder
ie8及以下，图片不要使用background的形式展示，尽量使用img
ie8及以下使用filter: alpha(opacity=50);设置透明度
ie7及以下版本多层级滚动，非body撑开的滚动，要设置position:relative/absolute,才可以有滚动的效果
ie7及以下版本没有border-radius的样式,需要使用图片去替代圆角的效果
ie7及以下版本没有box-shadow,使用border显示,或者使用filter，

filter:progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')
/* * Color，设置阴影颜色。
 *Direction，设置阴影的方向，角度也是从0°~315°取值（跟PS的投影效果非常的相似。）
 *Strength，设置投影强度，数值越大越模糊。
*/

ie7及以下版本没有rgba,例如：background: rgba(255,255,255,0.1);改用

filter:progid:DXImageTransform.Microsoft.Gradient(     
    GradientType=0,     /* GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1 | 0 */
    StartColorStr="#ccffffff",   /* 可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。 */     
    EndColorStr="#ccffffff"      /* 可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。 */
);
/* *  @ StartColorStr,EndColorStr :其格式为 #AARRGGBB 。
*  AA、RR、GG、BB为十六进制正整数。取值范围为 00 - FF 。 
*  RR 指定红色值， GG 指定绿色值， BB 指定蓝色值, AA 指定透明度(00 是完全透明, FF 是完全不透明)。超出取值范围的值将被恢复为默认值。 
*　取值范围为 #FF000000 - #FFFFFFFF 。StartColorStr,默认值为 #FF0000FF ,不透明蓝色。EndColorStr,默认值为 #FF000000 。不透明黑色。 
*/

ie7浏览器下inline元素嵌套如果有空格或者换行会显示多余的空格
①删除多余的换行和空格
②使用white-space: nowrap
ie7及以下float会换行，使用左右浮动搭配使用，还要清除浮动
ie7及以下下非独占一行的标签不使用p和div，会导致样式换行
ie7及以下background的图片，不可以按样式设置大小显示大图，要使用filter

*background: none;// 不使用background样式展示图片背景（ie6|7）
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url', sizingMethod='scale');

ie6版本没有position:fixed,要使用position:absolute,替换定位的方式
ie6版本100%高度要一层一层添加父节点的100%高度的样式

感谢，老铁的阅读，如果喜欢的,帮忙点个👍,你的支持我是前进的动力++