瀏覽器相容性問題及解決方案

2021-09-12 10:44:26 字數 879 閱讀 7712

市場上瀏覽器種類很多,不同瀏覽器的核心也不盡相同,所以各個瀏覽器對網頁的解析存在一定的差異。

瀏覽器核心主要分為兩種,一是渲染引擎,另乙個是js 引擎,核心更加傾向於說渲染引擎。

常見的相容性問題:

1、不同瀏覽器的標籤預設的外補丁( margin )和內補丁(padding)不同

解決方案: css 裡增加萬用字元 *

2、ie6雙邊距問題;在 ie6中設定了float , 同時又設定margin , 就會出現邊距問題

解決方案:設定display:inline;

3、當標籤的高度設定小於10px,在ie6、ie7中會超出自己設定的高度

解決方案:超出高度的標籤設定overflow:hidden,或者設定line-height的值小於你的設定高度

5、ie9一下瀏覽器不能使用opacity

解決方案:

opacity: 0.5;filter: alpha(opacity = 50);filter: progid:dximagetransform.microsoft.alpha(style = 0, opacity = 50);

6、邊距重疊問題;當相鄰兩個元素都設定了margin 邊距時,margin 將取最大值,捨棄最小值;

解決方案:為了不讓邊重疊,可以給子元素增加乙個父級元素,並設定父級元素為overflow:hidden;

7、cursor:hand 顯示手型在safari 上不支援

解決方案:統一使用 cursor:pointer

8、兩個塊級元素,父元素設定了overflow:auto;子元素設定了position:relative ;且高度大於父元素,在ie6、ie7會被隱藏而不是溢位;

解決方案:父級元素設定position:relative

原文:

瀏覽器相容性問題及解決方案

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

瀏覽器相容性問題與解決方案

一 不同瀏覽器的標籤預設的外邊界和內填充不同 問題表現 不加樣式控制下,margin和padding差異較大 出現概率 100 解決方案 css裡 備註 這是最常見也是最易解決的乙個相容問題,幾乎所有的css檔案開頭都會用萬用字元 來設定各個標籤外邊界和內填充為0 二 塊屬性標籤float後,又有橫...

CSS 多瀏覽器相容性問題及解決方案

相容性處理要點 1 doctype 影響 css 處理 2 ff 設定 padding 後,div 會增加 height 和 width,但 ie 不會,故需要用 important 多設乙個 height 和 width 3 ff 支援 important,ie 則忽略,可用 important ...