IE6相容性的幾個問題

2021-05-23 20:15:05 字數 2085 閱讀 4358

ie6

下的內外邊距問題:

ie6

裡面的

div

會擠壓外面的

div

造成各個瀏覽器寬度不同是由於

ie6使用

margin

或padding

會擠壓div

的寬度,導致寬度變長造成的,而

ie7,ie8

不會。無論是

ie7還是

ie8使用

padding

都會往外擠,只是

ie6不夠位置了會擠壓到變形,而其他瀏覽器不夠位置則會各個模組的空間重疊在一起。

margin

padding

的區別:

margin

擠壓別的容器,別的容器不一定會被擠壓擴大

padding

擠壓自身,自身肯定會被擠壓擴大

使用margin

和padding

調節寬度的注意事項,注意在

ie6,

ie7,

ie8中測試;

ie6

雙邊距問題:

ie6下面,紅色的容器並沒有按我們想象的去排列,這就是產生雙倍距離的問題。

這個bug

僅當浮動邊界和浮動元素的方向相同時出現在浮動元素和容器盒的內邊緣之間,在這之後的任意有著相似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的第乙個浮動元素會遭遇這個

bug。像居左的情況一樣,雙倍邊界同樣神秘地顯示在居右的相同方式。

解決辦法很簡單,就是在紅色容器的

css加入

display:inline 屬性

注釋

bug

ie6出現重複字元的

bug(注釋

bug、

3pixbug

)乙個容器包含

2兩個具有

「float」

樣式的子容器。

第二個容器的寬度大於父容器的寬度,或者父容器寬度減去第二個容器寬度的值小於

3。(說到

3,這裡稍微多說一句

——ie7

還修正了

ie6中的乙個

bug,

bug名字就叫做

「3畫素

bug」

)在第二個容器前存在注釋(這也是為什麼此

bug也叫做

「ie6

注釋bug」

的原因)。

為何會出現重複文字

bug雖然的的確確的存在,但是為什麼會出現這樣的bug依然沒有統一的定論。不同的高手也是各執一詞,誰也說服不了誰。真正的原因也許只有當時的ie6團隊才能道出來,但是現在仍然沒有官方的說法。下面列出來的這兩種說法,是只是現在網上認可度比較高的而已——

ie6瀏覽器對注釋的解釋存在bug引起的。

「3畫素bug」的擴充套件後遺症。(「3畫素bug」我們將在《ie7的web標準之道》系列以後的文章中講到)

其他的一些說法

如何消滅重複文字

引起的原因,也許我們可以不知道,但是如何去消除卻是我們一定要關注的。

「歌劇院魅影bug」已經在ie7中得到修正,在firefox和opera中也不會出現,所以bug的修正主要是針對ie6的。

針對於上文中講到的「bug重現條件」,如果要修正bug,只要讓任何乙個條件不滿足即可——

改變結構,不出現【乙個容器包含2兩個具有「float」樣式的子容器】的結構。

減小第二個容器的寬度,使父容器寬度減去第二個容器寬度的值大於3,例如將本文示例中第二個子容器的寬度改為197px。

——去掉所有的注釋。

——修正注釋的寫法。將寫成

在第二個容器後面加乙個或者多個

來解決。

——

ie6瀏覽器相容性

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

(IE6)中常見的幾個相容性問題簡述

產生條件 不設定文件宣告,頁面就會陷入怪異盒模型解析模式 解決方法 加入文件宣告 產生條件 在ie6下,塊元素有浮動有橫向的margin,橫向的margin值會被放大成兩倍浮動方向與margin方向一致時,該方向會出現雙倍邊距 解決方法 display inline img產生條件 ie6瀏覽器 l...

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

一.選擇器差異 1.動態偽類的差異 hover,active,focus ie6的 hover以及 active只支援錨鏈結 a 而 focus完全無用 ie7的 hover支援所有元素,但是 active以及 focus被忽略 解決方案 加入htc 檔案 csshover.htc body 二.盒...