position: fixed;這個(gè)屬性用起來(lái)確實(shí)很方便，可以輕松的實(shí)現(xiàn)固定位置的浮動(dòng)層效果 。但是，它不支持IE6及以下版本 。于是很多同學(xué)使用JS模擬 。今天寫(xiě)了一個(gè)DEMO，涉及左側(cè)、右側(cè) 。及上下兩邊，共四種位置的固定，與以往的教程不同的地方是，它使用CSS表達(dá)式來(lái)兼容IE5、IE6，且避免了js模擬時(shí)，拖動(dòng)滾動(dòng)條時(shí)出現(xiàn)抖動(dòng)的問(wèn)題，另外在IE5或者怪癖模式下也完全正常，沒(méi)有任何問(wèn)題 。如果你有更好的方案，歡迎來(lái)噴我 。
下面是代碼
復(fù)制代碼代碼如下:
!DOCTYPE HTML
html
head
meta charset="utf-8"
titleposition: fixedwebjx.com/title
style type="text/css"
* {
padding: 0;
margin: 0;
}
#content {
height: 5000px;
width: 50%;
border-right: 10px dotted red;
}
#demo_t, #demo_b, #demo_l, #demo_r {
background: #f90;
position: fixed;
}
#demo_t, #demo_b {
left: 0;
width: 100%;
}
#demo_l, #demo_r {
width: 50px;
top: 300px;
}
#demo_t {
top: 0;
}
#demo_b {
bottom: 0;
}
#demo_l {
left: 0;
}
#demo_r {
right: 0;
}
/style
!--[if lte IE 6]
style type="text/css"
html {
/*這個(gè)可以讓IE6下滾動(dòng)時(shí)無(wú)抖動(dòng)*/
background: url(about:black) no-repeat fixed
}
#demo_t, #demo_b, #demo_l, #demo_r {
position: absolute;
}
#demo_t, #demo_b {
/*這個(gè)解決body有padding時(shí)，IE6下100%不能鋪滿(mǎn)的問(wèn)題*/
width: expression(offsetParent.clientWidth);
}
/*下面三組規(guī)則用于IE6下top計(jì)算*/
#demo_l, #demo_r {
top: expression(offsetParent.scrollTop300);
}
#demo_t {
top: expression(offsetParent.scrollTop);
}
#demo_b {
top: expression(offsetParent.scrollTopoffsetParent.clientHeight-offsetHeight);
}
/style
![endif]--
/head
body
div id="demo_t"此處顯示 id "demo" 的內(nèi)容/div
div id="demo_b"此處顯示 id "demo" 的內(nèi)容/div
div id="demo_l"此處顯示 id "demo" 的內(nèi)容/div
div id="demo_r"此處顯示 id "demo" 的內(nèi)容/div
div id="content"/div
/body
/html
建議在實(shí)際使用時(shí)，將IE條件注釋中的代碼放在單獨(dú)的css文件中，以便節(jié)約其他瀏覽器的流量 。
順便頂一下微軟的這個(gè)項(xiàng)目，現(xiàn)在有中文版了，建議廣大前端er加入這一行列，盡快滅亡IE6
推薦閱讀
- padding ie 不兼容問(wèn)題
- 微軟從明年1月12日起停止對(duì)IE6-IE8瀏覽器提供技術(shù)支持
- 讓老式瀏覽器識(shí)別html5 在IE6/7/8下識(shí)別html5標(biāo)簽
- position：fixed IE6瀏覽器不支持固定定位解決方案
- IE6: border的transparent透明解決方案
- 兼容IE6/IE7/IE8/火狐 下拉菜單select樣式設(shè)置
- 教你解決Win8的IE10瀏覽器不兼容的問(wèn)題
- ie6,ie7,ie8完美支持position:fixed的終極解決方案
- jQuery實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁(yè)遮罩層/彈出層效果兼容IE6、IE7
- css padding屬性兼容ie6,ie8,firefox實(shí)例詳解