ie6瀏覽器相容性

2021-10-01 01:38:22 字數 1688 閱讀 2163

塊狀元素設定float(左浮動或有浮動),並且設定margin值之後,第乙個浮動的元素其左側margin值為正常的2倍,如圖,可以看到第乙個元素的左側邊距於其他元素兩兩之間的邊距一致,也就是其左邊距為正常邊距的兩倍

解決方法:給元素設定display:inline即讓元素不為塊狀元素,如圖第乙個元素左側的邊距顯示正常

設定藍色塊狀元素左浮動,紅色元素不浮動,兩個塊元素之間會出現3畫素的間隙,如圖

解決方法:第二個元素也設定左浮動,如圖,間隙消失

也可以使用ie6特有的hack規則,為其(左側元素)寫相應的css

_zoom:1; //zoom是ie觸發layout條件之一

margin-right:value;//value為希望的margin值

_margin-right: value-3px;

若ie6下字型大小為22px,設定div的高度低於22px時無效,ie認為div高度不能低於字型高度,如圖設定div高度為10px,但其實際高度為22px;

解決方法

(1)設定overflow:hidden

(2)設定font-size:0px;

(3)在元素中插入html注釋

(4)在元素中插入html空格  

解決方案將parent的寬度改為偶數(600px),效果如圖

垂直挨著時,之間會有間隙,如圖

解決方法:

ie6瀏覽器相容性

原因是注釋造成的文字溢位,且溢位的文字數=注釋的條數*2-1,該bug與注釋文字的位置、元素的浮動以及文字的固定寬度有關

解決方法:

(1)去掉注釋

(2)不放置於浮動塊之後

(3)去除文字區的固定寬度

(4)後邊新增br(有幾條注釋就新增幾個br)

父元素設定了z-index之後,子元素會繼承,對自己設定的z-index置之不理

解決方法:

position的relative改為absolute

浮動元素新增position

去除浮動

瀏覽器相容性

瀏覽器相容性是乙個很長久的話題,之所以前端需要面對瀏覽器相容性,是因為使用者的環境有不同的平台,不同的瀏覽器。不同的廠商之間為了相互競爭,對標準的實現不一樣。不同的瀏覽器有不同的核心。即使同乙個瀏覽器也有不同的版本,不同的版本對同一特性的支援情況也不盡相同。也可能某個瀏覽器的某個版本針對某個特性存在...

瀏覽器相容性

所謂的瀏覽器相容性問題,是指因為不同的瀏覽器對同一段 有不同的解析,造成頁面顯示效果不統一的情況。在大多數情況下,我們的需求是,無論使用者用什麼瀏覽器來檢視我們的 或者登陸我們的系統,都應該是統一的顯示效果。所以瀏覽器的相容性問題是前端開發人員經常會碰到和必須要解決的問題。在學習瀏覽器相容性之前,我...

瀏覽器相容性

trident ie核心 gecko firefox 核心 webkit chrome,safari blink webkit 的分支 presto 是挪威產瀏覽器 opera 的 前任 核心,為何說是 前任 因為最新的 opera 瀏覽器早已將之拋棄從而投入到了谷歌大本營。移動端的瀏覽器核心主要說...