CSS相容性考慮 如何用css固定位置

2021-05-23 08:31:57 字數 1187 閱讀 4303

如果你用這段css去做實驗的話,我相信多數朋友看不到應有的效果,原因在於你用的是ie,那個對w3標準支援不完善的瀏覽器,如果你用firefox的話,應該是沒有任何問題的。不過我們得承認現實,畢竟ie的瀏覽器佔據了絕大部分市場,所以必須寫出相容ie的css才行。由於ie不支援fixed,因此,可以針對ie和ff寫不同的css,如:

上面的**解決了相容的問題,但是ie下的依然不能將div固定在螢幕的具體位置,因此我們只有出絕招了,那便是寫出相容的css,**如下(傳說出現表示式的css出現了):

(show/hide)plain text

div#loadingstatus

body > div#loadingstatus

這樣看來似乎已經很完美了,應該能夠得到我們需要的效果了,不信,你自己試一試。對不起,讓你失望了,這還是不行,因為我們在拉動滾動條的時候,針對ie的那段css中的表示式罷工了,僅僅是載入頁面的時候進行了計算,後面就不幹活了,這可如何是好?別擔心,乙個ie的bug而已,我們只要將表示式的值賦給一變數,這個問題就解決了,所以下面的css就可以正常工作了:

margin:0 0 0 -110px;

width:220px;height:19px;

left:50%;

text-align:center;

border:1px solid red;

}rendering...#loadingstatus

那麼如何將div固定在左上角或者右下角呢?下面給點css**,應該自己看看就能明白了:

div#loadingstatus

忘記給案例了,要不又有朋友有意見了,案例請參見附件:fix.html

(show/hide)plain text

div#loadingstatus

body > div#loadingstatus

(show/hide)plain text

#loadingstatus{

position:fixed ;

top:100px;/*始終距離螢幕的高度是100px*/

CSS相容性總結

一.針對ie6的 important 必須寫在前面,例如 background 9c6 important background 999 二.css hack ie6 專用 height 100px ie7 專用 height 100px ie6 ie7 共用 height 100px ie7 ff...

CSS相容性彙總

css屬性hack 把屬性hack分為 字首屬性hack和 字尾屬性hack css屬性hack 字首 針對的瀏覽器 color red ie6及其以下的版本 color red 或者 color red ie7及其以下的版本 css屬性hack 字尾 針對的瀏覽器 color red 9 ie6 ...

CSS 瀏覽器相容性

1.不同瀏覽器的標籤預設的margin和padding不同 解決方案 所以需要有自己的格式化樣式 margin 0 padding 0 2.塊屬性標籤float後,又有橫行的margin情況下,在ie6顯示margin比設定的大 解決方案 在float的標籤樣式控制中加入 display inlin...