前端開發中各瀏覽器相容性問題彙總 不間斷更新

2021-06-16 17:51:43 字數 842 閱讀 9958

一、css部分

q:ie7下z-index屬性的有時候達不到理想效果的問題

a:ie7下子元素的z-index屬性會被定位了的父元素影響而重置,所以ie7下若發現某乙個元素z-index設定無效,嘗試去找它定位了的(relative或者absolute)父元素,並同時也設定該父元素的z-index為相應值。

q:claer:left後,設定margin-top沒有效果

a:這種情況跟clear的實現原理有關,clear:left元素會被強制新增上乙個最小外邊距,使得它剛好能夠處在之前浮動元素的下方。然而ie6、ie7處理這個強制的上外邊距的時候與ff,chrome,ie8、9等瀏覽器不一樣。當給清除浮動元素新增margin-top屬性的時候,ie6、7是將它與強制新增的邊距相加,所以是有效果的,但是其他的瀏覽器則因為設定的margin-top值小於強制新增的最小外邊距值,所以直接被忽略, 不起作用,只有當設定的值大於這個強制值時,才開始起作用。

有幾種方式可以解決這個相容性問題:1、將上一行的浮動元素包圍在乙個div裡面,div進行clearfix閉合浮動處理。2、在浮動元素與需清除浮動元素之間插入乙個

,那麼那個需要清除浮動的元素也就不需要設定clear了。(這兩種方式都增加了額外的無意義div標籤,不推薦。)

3、讓清除浮動的元素也浮動起來。這種做法其實沒有解決根本問題,它清除了浮動但是又新增了新的浮動。

4、我自己用的方法,不知道有沒有後遺症。那就是乾脆不用margin-top,改用margin-bottom,將邊距的任務轉交給上一行的浮動元素。(考慮到垂直外邊距的疊加問題,一般我做的時候都是統一用margin-top來實現垂直外邊距的,margin-bottom也就是在這種特殊情況下使用。)

前端瀏覽器相容性問題

在前端開發的過程中我們不可避免的會遇到瀏覽器相容性問題,這也是我們必須要解決的問題。首先來了解一下為什麼存在瀏覽器相容性問題。現在的市場上有很多種類的瀏覽器,不同種類的瀏覽器的核心也不盡相同,所以不同瀏覽器對 的解析會存在差異,這就導致對頁面渲染效果不統一的問題。市場上常見的瀏覽器核心主要有四種 w...

前端瀏覽器相容性問題 一

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

瀏覽器相容性問題

苦惱的區別 1.image repeat 在火狐裡比較正常,可是在ie中一直repeat.背景是乙個關閉的x號,div設定的backgourn image url xx 結果在ie中卻不行,最後找到原因是ie中要顯式的寫上image repeat norepeat這屬性,還有好多的差異,明天 去了 ...