最近做開發(fā)一個醫(yī)院的項(xiàng)目，醫(yī)院系統(tǒng)電腦老舊，需要兼容到ie6,做前端開發(fā)始終還是沒有能夠逃脫IE的魔掌置森。
禱告：珍愛生命，遠(yuǎn)離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,相對的父元素有區(qū)別行贪，正常獲取的offsetTop值是相對直屬父節(jié)點(diǎn)的offsetTop值，需要計(jì)算父節(jié)點(diǎn)的offsetTop加上自己的offsetTop才是相對滾動容器節(jié)點(diǎn)正確的偏移值
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及以下沒有默認(rèn)提示的樣式placeholder
ie8及以下模闲，圖片不要使用background的形式展示建瘫，盡量使用img
ie8及以下使用filter: alpha(opacity=50);設(shè)置透明度
ie7及以下版本多層級滾動，非body撐開的滾動尸折，要設(shè)置position:relative/absolute,才可以有滾動的效果
ie7及以下版本沒有border-radius的樣式,需要使用圖片去替代圓角的效果
ie7及以下版本沒有box-shadow,使用border顯示,或者使用filter啰脚，
filter:progid:DXImageTransform.Microsoft.Shadow(color='', Direction='', Strength='')
/* * Color，設(shè)置陰影顏色实夹。
*Direction橄浓，設(shè)置陰影的方向，角度也是從0°~315°取值（跟PS的投影效果非常的相似亮航。）
*Strength荸实，設(shè)置投影強(qiáng)度，數(shù)值越大越模糊塞赂。
*/
ie7及以下版本沒有rgba,例如：background: rgba(255,255,255,0.1);改用
filter:progid:DXImageTransform.Microsoft.Gradient(
GradientType=0, /* GradientType:可讀寫泪勒。整數(shù)值(Integer)昼蛀。設(shè)置或檢索色彩漸變的方向。1 | 0 */
StartColorStr="#ccffffff", /* 可選項(xiàng)圆存。字符串(String)叼旋。設(shè)置或檢索色彩漸變的開始顏色和透明度。 */
EndColorStr="#ccffffff" /* 可選項(xiàng)沦辙。字符串(String)夫植。設(shè)置或檢索色彩漸變的結(jié)束顏色和透明度。 */
);
/* * @ StartColorStr,EndColorStr :其格式為 #AARRGGBB 油讯。
* AA详民、RR、GG陌兑、BB為十六進(jìn)制正整數(shù)沈跨。取值范圍為 00 - FF 。
* RR 指定紅色值兔综， GG 指定綠色值饿凛， BB 指定藍(lán)色值, AA 指定透明度(00 是完全透明, FF 是完全不透明)。超出取值范圍的值將被恢復(fù)為默認(rèn)值软驰。
* 取值范圍為 #FF000000 - #FFFFFFFF 涧窒。StartColorStr,默認(rèn)值為 #FF0000FF ,不透明藍(lán)色。EndColorStr,默認(rèn)值為 #FF000000 锭亏。不透明黑色纠吴。
*/
ie7瀏覽器下inline元素嵌套如果有空格或者換行會顯示多余的空格
①刪除多余的換行和空格
②使用white-space: nowrap
ie7及以下float會換行，使用左右浮動搭配使用慧瘤，還要清除浮動
ie7及以下下非獨(dú)占一行的標(biāo)簽不使用p和div戴已，會導(dǎo)致樣式換行
ie7及以下background的圖片，不可以按樣式設(shè)置大小顯示大圖锅减，要使用filter
*background: none;// 不使用background樣式展示圖片背景（ie6|7）
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url', sizingMethod='scale');
ie6版本沒有position:fixed,要使用position:absolute,替換定位的方式
ie6版本100%高度要一層一層添加父節(jié)點(diǎn)的100%高度的樣式
