上一篇《CSS Grid布局教程之什么是網(wǎng)格布局》中簡(jiǎn)單介紹了什么是CSS Grid Layout以及一些概念和術(shù)語(yǔ)，為后續(xù)學(xué)習(xí)和使用CSS Grid Layout做了一些鋪墊。但瀏覽器對(duì)CSS Grid Layout到目前為止各瀏覽器廠端支持程度不一致，致使無(wú)法全面使用，就算是學(xué)習(xí)做一些測(cè)試示例都還需要做一些設(shè)置。那么在這篇文章中，將向大家介紹如何讓自己的瀏覽器支持CSS Grid Layout模塊功能。

瀏覽器兼容性

先來(lái)回憶一下幾大主流瀏覽器對(duì)CSS Grid Layout模塊的支持達(dá)到什么樣的程度：

從上圖不做過(guò)多闡述，可以說(shuō)是一目了然，不過(guò)值得欣慰的是，一直不給力的IE，這回卻給力了一回，從IE10版本就默認(rèn)開(kāi)啟了CSS Grid Layout的模塊功能。

開(kāi)啟瀏覽器的CSS Grid Layout模塊功能

到目前幾大主流瀏覽器主要包括：

Chrome Safari Internet Explorer Opera Firefox

當(dāng)然，喜歡追求新東西的同學(xué)，還會(huì)觀注：

Chrome CanaryWebkit NightlyOpera NextFirefox Aurora

除了IE10+默認(rèn)支持CSS Grid Layout模塊功能之外，其他的瀏覽器Chrome、Safari、Opera和Firefox都需要重新設(shè)置（啟用開(kāi)發(fā)中的實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能）。

Chrome瀏覽器

在寫這篇文章的時(shí)候，我使用的Chrome瀏覽器版本是“Chrome 38.0.2125.101”。在Chrome瀏覽器中開(kāi)啟CSS Grid Layout模塊功能比較簡(jiǎn)單，只需要在您的瀏覽器地址欄中輸入：chrome://flags，回車后在列表清單中找到“啟用實(shí)驗(yàn)性網(wǎng)絡(luò)平臺(tái)功能”（#enable-experimental-web-platform-features），一個(gè)更為簡(jiǎn)單的方法，可以直接在瀏覽器地址欄中輸入網(wǎng)址：chrome://flags#enable-experimental-web-platform-features立馬定位需要的選項(xiàng)，然后點(diǎn)擊“啟用”(enable)按鈕，如下圖所示：

開(kāi)啟之后，記得重啟您的瀏覽器。為了難您已開(kāi)啟成功，你可以在你的瀏覽器中打開(kāi)這個(gè)Demo。如果您能看到類似下圖的效果，表示已開(kāi)啟成功，可以做CSS Grid Layout相關(guān)的學(xué)習(xí)和演示。

Opera瀏覽器

Opera瀏覽器開(kāi)啟CSS Grid Layout的方法和Chrome是一樣的。在Opera瀏覽器網(wǎng)址欄中輸入opera://flags，并且找到##Enable experimental Web Platform features（或者直接輸入opera://flags/#enable-experimental-web-platform-features），點(diǎn)擊“開(kāi)啟”按鈕：

重啟您的瀏覽器即可使用CSS Grid Layout功能。

注：我測(cè)試使用的Opera版本是“Opera25.0.1614.50”。

Safari(Webkit)瀏覽器

從2014年4月2號(hào)開(kāi)始，在Webkit Nightly中默認(rèn)內(nèi)置了CSS Grid Layout模塊功能。詳細(xì)信息可以點(diǎn)擊這里了解。

Firefox瀏覽器

非常遺憾，直到目前為止，我還沒(méi)有找到如何在Firefox瀏覽器中開(kāi)啟CSS Grid Layout模塊。如果您知道如何在Firefox瀏覽器中開(kāi)啟相關(guān)功能，還請(qǐng)多多指點(diǎn)。

總結(jié)

前面主要向大家介紹了哪些瀏覽器已默認(rèn)支持CSS Grid Layout模塊，并且介紹了如何在Chrome和Opera瀏覽器中開(kāi)始CSS Grid Layout模塊。當(dāng)然還有一些遺憾，至今還沒(méi)有找到如何在Firefox中開(kāi)啟類似功能的方法。不過(guò)不用擔(dān)心，到目前為止，我們至少有四種不同的瀏覽器（IE10+、Chrome、Opera和Webkit Nightly）可以做相關(guān)的演示與測(cè)試。

那么在接下來(lái)的教程，我們就可以開(kāi)始學(xué)習(xí)如何使用CSS Grid Layout來(lái)布局。希望大家會(huì)喜歡。

最新評(píng)論