position:fixed 在ie8下的相容性處理(附帶ie8以下不透明度相容)
阿新 • • 發佈：2018-12-10
1、解決fixed相容性核心程式碼：
.ie{ _position: absolute; _clear: both; _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1); }
原理：利用css表示式，將js程式碼插入到css中，但因expression存在較多的缺陷，目前已不提倡使用，可直接利用js控制。
2、解決不透明度相容性核心程式碼：
/*支援rgba的瀏覽器*/ background: rgba(0,0,0,.5); /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml核心的Safari瀏覽器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter:alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
完整demo：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fixed在ie下的相容處理</title> <style> .ie{ _position: absolute; _clear: both; _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) - 1 : document.body.scrollTop +(document.body.clientHeight-this.clientHeight) - 1); } .fixed{ position: fixed; width: 200px; height: 200px; left:50%; top:0; background:#000; /*支援rgba的瀏覽器*/ background: rgba(0,0,0,.5); /* older safari/Chrome browsers */ -webkit-opacity: 0.5; /* Netscape and Older than Firefox 0.9 */ -moz-opacity: 0.5; /* Safari 1.x (pre WebKit!) 老式khtml核心的Safari瀏覽器*/ -khtml-opacity: 0.5; /* IE9 + etc...modern browsers */ opacity: .5; /* IE 4-9 */ filter:alpha(opacity=50); /*This works in IE 8 & 9 too*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*IE4-IE9*/ filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50); } p{ margin:50px; height: 200px; } </style> </head> <body> <p>測試行測試行測試行測試行測試行測試行</p> <p>測試行測試行測試行測試行測試行測試行</p> <p>測試行測試行測試行測試行測試行測試行</p> <p>測試行測試行測試行測試行測試行測試行</p> <p>測試行測試行測試行測試行測試行測試行</p> <p>測試行測試行測試行測試行測試行測試行</p> <div class="fixed ie"></div> </body> </html>