IE6關於CSS的相容性差異總結

2021-06-19 15:19:27 字數 631 閱讀 5966

一.選擇器差異

1.動態偽類的差異(:hover,:active,:focus)

ie6的:hover以及:active只支援錨鏈結(a),而:focus完全無用

ie7的:hover支援所有元素,但是:active以及:focus被忽略

解決方案:加入htc 檔案(csshover.htc )

body

二.盒模型的差異

1.ie7以下版本不支援outline屬性(所以盡量不要用。。。)

2.ie6混雜模式中(ie5.5核心)使用非標準盒模型,width與height屬性是內容,內邊距(padding),以及邊框(border)的總和

三.定位上的差異

1.ie7及以下版本不支援inline-block的display屬性

2.ie6在絕對定位中,如果b要相對於相對定位的祖先框a右邊或底部定位,那麼a必須設定寬度和高度,否則會相對畫布絕對定位b

原因:這是由ie蛋疼的「布局」(layout)內部概念引起的,相對定位元素沒有布局

解決方案:設定屬性使得元素擁有布局,條件注釋,利用瀏覽器bug建立hack(如星號html hack,子選擇器hack)

(------未完待續-------)

ie6瀏覽器相容性

塊狀元素設定float 左浮動或有浮動 並且設定margin值之後,第乙個浮動的元素其左側margin值為正常的2倍,如圖,可以看到第乙個元素的左側邊距於其他元素兩兩之間的邊距一致,也就是其左邊距為正常邊距的兩倍 解決方法 給元素設定display inline即讓元素不為塊狀元素,如圖第乙個元素左...

IE6相容性的幾個問題

ie6 下的內外邊距問題 ie6 裡面的 div 會擠壓外面的 div 造成各個瀏覽器寬度不同是由於 ie6使用 margin 或padding 會擠壓div 的寬度,導致寬度變長造成的,而 ie7,ie8 不會。無論是 ie7還是 ie8使用 padding 都會往外擠,只是 ie6不夠位置了會擠...

關於ie6,ie7相容性總結

ie的float bug ie6,ie7 使前端工程師們為之困擾,最常見的現象就是 當浮動元素的父級元素在拖動滾動條的時候出現邊框的缺失,對於此類問題的解決方案就是使浮動元素獲得布局.在諸多的情況中,因為頁面需要寬度自由伸縮而不能申明寬度為固定值,但我們可以設定 height 1 在這裡可謂是舉足輕...