瀏覽器相容性隨筆

2022-05-06 04:00:11 字數 3051 閱讀 2593

1、對於一些雙核瀏覽器,如何優先適配,搜過瀏覽器的適配方式。

如您是**的開發者,可以通過在頁面標籤中新增**,來指定**的模式

若頁面需預設用極速模式,增加標籤:

若頁面需預設用ie相容模式,增加標籤:

若頁面需預設用ie標準模式,增加標籤:

content的取值分別為webkit,ie-comp,ie-stand,區分大小寫,分別代表用極速模式,ie相容模式(低版本ie模式),ie標準模式(高版本ie模式)

1、如何將ie8相容 bootstrap的**

新增兩個js的檔案。

respond.js

modernizr-2.6.2.js

強制使用ie8進行解析

1、用ie8時強制用ie8解析,需要加下面的話,這句話會強制ie8瀏覽器按照ie8的 

如果還要加上其他瀏覽器呢?不止ie8瀏覽器

2、ie8 如何防止console沒有定義,加下面的**。

window.console = window.console || (function

(); c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir =c.profile

= c.clear = c.exception = c.trace = c.assert = function

(){};

return

c; })();

對於定義的問題,我們涉及到瀏覽器能力檢測。

3、如何獲取瀏覽器的版本

4、css hack 。指令碼hack怎麼處理

5、設定meta標籤

首先我們在使用media的時候需要先設定下面這段**,來相容移動裝置的展示效果:

這段**的幾個引數解釋:

6、載入相容檔案js

因為ie8既不支援html5也不支援css3 media,所以我們需要載入兩個js檔案,來保證我們的**實現相容效果:

7、:設定ie渲染方式預設為最高(這部分可以選擇新增也可以不新增)

現在有很多人的ie瀏覽器都公升級到ie9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是ie9的瀏覽器,但是瀏覽器的文件模式卻是ie8:

為了防止這種情況,我們需要下面這段**來讓ie的文件模式永遠都是最新的:

太給力了。

不過我最近又發現了乙個更給力的寫法:

怎麼這段**後面加了乙個chrome=1,這個google chrome frame(谷歌內嵌瀏覽器框架gcf),如果有的使用者電腦裡面裝了這個chrome的外掛程式,就可以讓電腦裡面的ie不管是哪個版本的都可以使用webkit引擎及v8引擎進行排版及運算,無比給力,不過如果使用者沒裝這個外掛程式,那這段**就會讓ie以最高的文件模式展現效果。這段**我還是建議你們用上,不過不用也是可以的。

@media screen and (max-width: 960px)

}這個應該算是乙個media的乙個標準寫法,上面這段css**意思是:當頁面小於960px的時候執行它下面的css.這個應該沒有太大疑問。

應該有人會發現上面這段**裡面有個screen,他的意思是在告知裝置在列印頁面時使用襯線字型,在螢幕上顯示時用無襯線字型。但是目前我發現很多**都會直接省略screen,因為你的**可能不需要考慮使用者去列印時,你可以直接這樣寫:

@media (max-width: 960px)

}其實並不是只有css3才支援media的用法,早在css2開始就已經支援media,具體用法,就是在html頁面的head標籤中插入如下的一段**:

上面其實是css2實現的襯線用法,那css3的media難道就只能支援上面這乙個功能嗎?答案當然不是,他還有很多用法。

例如我們想知道現在的移動裝置是不是縱向放置的顯示屏,可以這樣寫:

我們把第一段的**也用css2來實現,讓它一樣可以讓頁面寬度小於960的執行指定的樣式檔案:

既然css2可以實現css的這個效果為什麼不用這個方法呢,很多人應該會問,但是上面這個方法,最大的弊端是他會增加頁面http的請求次數,增加了頁面負擔,我們用css3把樣式都寫在乙個檔案裡面才是最佳的方法。

上面我們大概講了下css2的**查詢用法,現在我們重新回到css3的**查詢,在第一段**上面我用的是小於960px的尺寸的寫法,那現在我們來實現等於960px尺寸的**:

@media screen and (max-device-width:960px)

}然後就是當瀏覽器尺寸大於960px時候的**了:

@media screen and (min-width:960px)

}我們還可以混合使用上面的用法:

@media screen and (min-width:960px) and (max-width:1200px)

}上面的這段**的意思是當頁面寬度大於960px小於1200px的時候執行下面的css。

以上就是我們最常需要用到的**查詢器的三個特性,大於,等於,小於的寫法。**查詢器的全部功能肯定不止這三個功能,下面是我總結的它的一些引數用法解釋:

瀏覽器相容性

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

瀏覽器相容性

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

瀏覽器相容性

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