為企業提供網站平臺解決方案

178 7892 1916

QQ客服:點擊這里給我發消息 點擊這里給我發消息

最新動態:

CSS樣式技巧

你的位置:中国竞彩足球比分网 > 建站知識 > CSS樣式技巧 > div css固定層(兼容IE6 IE7 IE8)

500彩票竞彩足球比分:div css固定層(兼容IE6 IE7 IE8)

發布時間:2013-04-18 21:02作者:中国竞彩足球比分网網址:中国竞彩足球比分网瀏覽:次
每個網站前端設計師 都知道 CSS 的 position:fixed 的妙用。利用這個屬性,我們可以輕松的將一個元素“固定”在頁面的某個位置。這在我們做一些特殊的效果,例如頁邊角的小角旗,或是固定頁面底下的腳注都是非常有用的。但是萬惡的 IE 卻對這個屬性支持有問題,盡管 IE7/
每個網站前端設計師 都知道 CSS 的 position:fixed 的妙用。利用這個屬性,我們可以輕松的將一個元素“固定”在頁面的某個位置。這在我們做一些特殊的效果,例如頁邊角的小角旗,或是固定頁面底下的腳注都是非常有用的。但是萬惡的 IE 卻對這個屬性支持有問題,盡管 IE7/8 已經能夠正確處理這個屬性,但 IE6 的份額還是很高,所以當我們用這個屬性時,還得想辦法解決這個問題。 
css:
body {
background-image:url(text.txt);
background-attachment:fixed;
}
#bottomNav {
background-color:#096;
z-index:999;
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute;
_top: expression_r(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
overflow:visible;
}

對于 IE7 來說,它雖然可以正確的將這個元素 fix 在底部,但它卻錯誤的處理了水平方向的位置。對于這個問題,我們可以利用一個原有的 hack 來解決: 
 
*left: 0%; 
對于IE6
再看看這些需要注意的地方:
_top: expression_r(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
看到 _top 大家都知道是為IE6獨家準備的,但是當我只加了上面這句時,IE6下拉動滾動條看到的這個漂浮物是抖動的-_-||| 解決方法我們為IE6添加這樣一條語句:
background-image:url(text.txt);
注意這里的 text.txt 其實不需要有這個txt文檔,txt的文件名叫什么看自己喜好嘍,如此一來我們就解決了IE6下的緩動問題。 PS:你可能會對 text.txt 和 expression 感到郁悶,也有人使用多嵌套一層 DIV 做了個假滾動條實現了這個方法,當然這種方法在也會相應的改動下默認屬性,可這種寫法和之前網站融合起來很郁悶,要添加一個DIV(因為我之前沒有在最外 層寫DIV.wrap)。
上一篇:沒有了
下一篇:css ie6/ie7自動換行